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

Question

我遇到的问题是，状态的重新呈现会导致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现在我需要更新的文本在哪里。

Answer 1

您可以使用React不变性助手

import update from 'react-addons-update';

// ...

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      1: {
        text: {$set: action.payload}
      }
    }
  });

虽然我想您可能会做更多这样的事情？

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      [action.id]: {
        text: {$set: action.payload}
      }
    }
  });