时间戳

首页 > 解决方案 > Redux 工具包切片。如何正确添加新数组？

reactjs - Redux 工具包切片。如何正确添加新数组？

问题描述

让我们想象一个服务器向我们发送数组。它可以相同或不同。我们不知道。如何在切片中正确添加？

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
    }
  }
});

但我认为有更好的方法。你怎么看？

标签： reactjsreduxredux-sagaredux-toolkit

解决方案

我认为让 redux-store 在数据从服务器到达时获取数据，但使用 React 的一些功能来记忆你想要的东西。

我已经分叉了您的示例并React.memo在一个Dumb组件中利用来展示如果新的东西来自服务器，React 将不会Dumb为旧数据呈现该组件，因为它已被记忆。

这是叉子：-

https://codesandbox.io/s/redux-toolkit-state-new-array-forked-fgeym?file=/src/dumb.js

如果您删除该React.memo位，所有三个列表项将一次又一次地呈现，否则，只有新项目将呈现。

检查控制台日志。

注意 - 默认情况下浅比较。您可以提供自定义比较函数React.memo作为第二个参数。

推荐阅读