如何在Redux中更新特定数组项内的单个值

JavaScript

逆天猿理查德

2020-03-12

我遇到一个问题，即状态的重新呈现会导致ui问题，并建议仅更新reducer内的特定值以减少页面上的重新呈现量。

这是我的状态的例子

{
 name: "some name",
 subtitle: "some subtitle",
 contents: [
   {title: "some title", text: "some text"},
   {title: "some other title", text: "some other text"}
 ]
}

我目前正在这样更新

case 'SOME_ACTION':
   return { ...state, contents: action.payload }

其中action.payload是包含新值的整个数组。但是现在我实际上只需要更新内容数组中第二个项目的文本，类似的事情就不起作用

case 'SOME_ACTION':
   return { ...state, contents[1].text: action.payload }

action.payload现在我需要更新的文本在哪里。

第1127篇《如何在Redux中更新特定数组项内的单个值》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
TomTom乐 2020.03.12

这是我为其中一个项目执行的操作：

const markdownSaveActionCreator = (newMarkdownLocation, newMarkdownToSave) => ({
  type: MARKDOWN_SAVE,
  saveLocation: newMarkdownLocation,
  savedMarkdownInLocation: newMarkdownToSave  
});

const markdownSaveReducer = (state = MARKDOWN_SAVED_ARRAY_DEFAULT, action) => {
  let objTemp = {
    saveLocation: action.saveLocation, 
    savedMarkdownInLocation: action.savedMarkdownInLocation
  };

  switch(action.type) {
    case MARKDOWN_SAVE:
      return( 
        state.map(i => {
          if (i.saveLocation === objTemp.saveLocation) {
            return Object.assign({}, i, objTemp);
          }
          return i;
        })
      );
    default:
      return state;
  }
};

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android