我有一个问题，重新渲染状态会导致 ui 问题，并建议仅更新我的减速器中的特定值以减少页面上的重新渲染量。
这是我所在州的例子
{
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现在我需要更新的文本在哪里。
您可以使用map. 这是一个示例实现：
case 'SOME_ACTION':
return {
...state,
contents: state.contents.map(
(content, i) => i === 1 ? {...content, text: action.payload}
: content
)
}
你可以使用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}
}
}
});
聚会很晚，但这里有一个适用于每个索引值的通用解决方案。
您创建一个新数组并将其从旧数组扩展到index要更改的数组。
添加所需的数据。
创建并传播一个新数组，从index您要更改的数组到数组末尾
let index=1;// probably action.payload.id
case 'SOME_ACTION':
return {
...state,
contents: [
...state.contents.slice(0,index),
{title: "some other title", text: "some other text"},
...state.contents.slice(index+1)
]
}
更新：
我做了一个小module来简化代码，所以你只需要调用一个函数：
case 'SOME_ACTION':
return {
...state,
contents: insertIntoArray(state.contents,index, {title: "some title", text: "some text"})
}
有关更多示例，请查看存储库
函数签名：
insertIntoArray(originalArray,insertionIndex,newData)
编辑：还有适用于各种值的Immer.js库，它们也可以深度嵌套。
您不必在一行中完成所有操作：
case 'SOME_ACTION': {
const newState = { ...state };
newState.contents =
[
newState.contents[0],
{title: newState.contents[1].title, text: action.payload}
];
return newState
};
我相信当你需要在你的 Redux 状态上进行这种操作时，spread 操作符是你的朋友，这个原则适用于所有孩子。
让我们假设这是您的状态：
const state = {
houses: {
gryffindor: {
points: 15
},
ravenclaw: {
points: 18
},
hufflepuff: {
points: 7
},
slytherin: {
points: 5
}
}
}
而你想给拉文克劳加3分
const key = "ravenclaw";
return {
...state, // copy state
houses: {
...state.houses, // copy houses
[key]: { // update one specific house (using Computed Property syntax)
...state.houses[key], // copy that specific house's properties
points: state.houses[key].points + 3 // update its `points` property
}
}
}
通过使用扩展运算符，您可以只更新新状态，而其他所有内容均保持不变。
来自这篇精彩文章的示例，您可以找到几乎所有可能的选项以及很好的示例。