Redux工具包切片。如何正确添加新数组？
提问于 2021-01-28 09:14:32
让我们设想一个服务器向我们发送数组。它可以是相同的，也可以不是。我们不知道。如何在slice中正确添加？
https://codesandbox.io/s/redux-toolkit-state-new-array-4sswi?file=/src/redux/slices/slice.js
是像这样吗？
const someSlice = createSlice({
name: "someSlice",
initialState: {
users: []
},
reducers: {
actionSuccess: (state, { payload }) => {
state.users = payload.users;
}
}
});如果我们得到相同的数组呢？这样，actionSuccess无论如何都会像新数组一样返回！这意味着会出现过度渲染。
所以我的决定是这样的
const someSlice = createSlice({
name: "someSlice",
initialState: {
users: []
},
reducers: {
actionSuccess: (state, { payload }) => {
if (JSON.stringify(state.users) !== JSON.stringify(payload.users)) {
state.users = payload.users;
}
return state
}
}
});但我认为有更好的方法。你觉得呢？
回答 1
Stack Overflow用户
发布于 2021-01-28 10:09:29
我认为让redux-store在数据从服务器到达时获取数据，但使用React的一些功能来记录您想要的内容。
我已经派生了您的示例，并在一个Dumb组件中利用了React.memo，展示了如果有来自服务器的新数据，React将不会为旧数据呈现Dumb组件，因为它已经被记忆了。
这就是叉子：
https://codesandbox.io/s/redux-toolkit-state-new-array-forked-fgeym?file=/src/dumb.js
如果删除React.memo位，所有三个列表项都将一次又一次地呈现，否则，只会呈现新的项。
检查控制台日志。
注意-默认情况下是浅层比较。您可以将自定义比较函数作为第二个参数提供给React.memo。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65934131
复制相关文章
点击加载更多
腾讯云开发者
