React-Redux 状态没有按预期更新——我是在改变 reducer 参数吗？答案

【问题标题】：React-Redux state not updating as expected—am I mutating reducer arguments?React-Redux 状态没有按预期更新——我是在改变 reducer 参数吗？
【发布时间】：2020-06-11 18:11:25
【问题描述】：

提前感谢您对这个（我相信）非常基本的问题的关注。我正在构建我的第一个“全栈”应用程序，并且遇到了一些我无法用 React-Redux 完全解决的问题。项目简要说明：用户可以提交乐队创意名称，并对其他人的提交进行投票。现在，我相信我的问题是我在处理 MODIFY_BAND_SCORE 动作的减速器中没有与状态进行适当的交互。这里是the git repository，我也将我的 store reducer 复制粘贴到这里：

export const store = createStore(
  combineReducers({
    bands(bands = defaultState.bands, action) {
      switch (action.type) {
        case mutations.CREATE_BAND:
          return [
            ...bands,
            {
              id: action.id,
              owner: action.owner,
              name: action.name,
              score: 0,
              flags: 0,
            },
          ];
        case mutations.MODIFY_BAND_SCORE:
          let targetBandIndex = bands.findIndex(
            (band) => band.id === action.bandID
          );
          let targetBand = bands.splice(targetBandIndex, 1)[0];
          targetBand.score = targetBand.score + action.value;
          bands.splice(targetBandIndex, 0, targetBand);
          return bands;
      }
      return bands;
    },
    users(users = defaultState.users, action) {
      return users;
    },
  }),
  applyMiddleware(createLogger(), sagaMiddleware)
);

希望这是足够的上下文来对这里发生的事情提出明智的建议——我很抱歉没有一个真正最小的工作示例！当我调度 MODIFY_BAND_SCORE 类型的操作时，我从 Redux-Logger 看到的行为是，我（在某种程度上）看到了反映在正确波段的分数被正确数量修改的变化，但它在上一个和下一个状态中以某种方式显示！截图如下：

我觉得我可能让这篇文章比它需要的更长，我认为在我的情况下mutations.MODIFY_BAND_SCORE 我实际上是在直接修改状态是否正确？这可能是因为我在乐队中调用.splice() 时发生的，不是吗？

【问题讨论】：

` let bandCopy = [...bands] ` 将创建一个副本并解决使用拼接直接修改bands的问题...

标签： reactjs redux react-redux

【解决方案1】：

就像悉达多提到的，

let copyOfBands = [...bands]

将为您创建一个副本。重要的是要记住 Redux 的关键部分之一是 store 是 read-only。在处理非原始数据时很容易忘记这一点（我当然做过很多），但您应该始终尝试记住制作数据的副本，修改副本，然后将副本推送到存储.这有助于防止您遇到非常奇怪且难以调试的错误。

重要的是要记住，这里的展开运算符会创建数组的浅层副本，这意味着如果数组内有其他非原始对象（例如其他数组），则也必须复制这些。

【讨论】：