我有一个问题,即重新渲染状态会导致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现在是我需要更新的文本.
解决方法
你可以使用
React Immutability helpers
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}
}
}
});