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

时间:2020-06-11 18:11:25

标签: reactjs redux react-redux

预先感谢您(非常重要)这个非常基本的问题。我正在构建我的第一个“全栈”应用程序,并且遇到了一些我无法用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看到的行为是(以某种方式)我看到的变化反映在正确的频段上,其乐谱被正确的量修改了,但它在上一个和下一个状态中以某种方式显示!这是屏幕截图:

Screen shot of redux-logger output in browser console

我觉得自己发布的内容可能比需要的要长,我是否认为在mutations.MODIFY_BAND_SCORE的情况下我实际上是在直接修改状态?这可能是由于我在乐队上打电话.splice()造成的,不是吗?

1 个答案:

答案 0 :(得分:1)

提到了悉达思,

let copyOfBands = [...bands]

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

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