Question

预先感谢您（非常重要）这个非常基本的问题。我正在构建我的第一个“全栈”应用程序，并且遇到了一些我无法用React-Redux完全解决的问题。该项目的简要说明：用户可以提交乐队的想法名称，以及对他人的提交内容进行上下投票。现在，我相信我的问题是我在处理MODIFY_BAND_SCORE动作的化简中没有与状态进行适当的交互。这是the git repository，我还将在这里复制并粘贴我的商店精简版：

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()造成的，不是吗？

Answer 1

提到了悉达思，

let copyOfBands = [...bands]

将为您创建一个副本。重要的是要记住，Redux的关键部分之一是商店是read-only。可能很容易忘记，当处理非原始数据时（我当然做了很多），但是您应该始终记住记住制作数据的副本，修改副本，然后将副本推入存储。这有助于防止您变得怪异而难以调试错误。

重要的是要记住，此处的散布运算符将创建数组的 shallow 副本，这意味着，如果数组中还有其他非原始对象（例如其他数组），则表示也必须复制这些内容。

React-Redux状态未按预期更新-我是否正在更改reducer参数？

1 个答案: