react-redux - 在 reducer 中改变状态的后果是什么？

Question

redux 指南指出:

We don't mutate the state. We create a copy with Object.assign(). Object.assign(state, { visibilityFilter: action.filter }) is also wrong: it will mutate the first argument. You must supply an empty object as the first parameter. You can also enable the object spread operator proposal to write { ...state, ...newState } instead.

我碰巧发现自己正在编写以下工作代码片段:

[actions.setSelection](state, {payload}) {
    state[payload.key] = payload.value;
    return state;
},

我对此有一种不好的感觉，并重新访问了智慧指南。从那以后，我将其重写为:

[actions.setSelection](state, {payload}) {
    const result = Object.assign({}, state);
    result[payload.key] = payload.value;
    return result;
},

我很确定我在代码中的其他地方触犯了上面提到的诫命。如果我不努力追踪他们，我会看到什么样的后果？

(注意:上面的 reducer 语法是通过 redux-actions 实现的。否则它将是 reducer fn switch/case 中的代码块。)

Answer 1

突变状态是 React 中的一种反模式。 React 使用渲染引擎，它依赖于状态变化是可观察的这一事实。这个观察是通过比较前一个状态和下一个状态来进行的。它将使用差异更改虚拟 dom，并将更改的元素写回 dom。

当你改变内部状态时，React 不知道发生了什么变化，甚至更糟；它对当前状态的概念是不正确的。所以 dom 和 virtual dom 会变得不同步。

Redux 使用相同的想法来更新它的存储；计算存储的下一个状态的 reducer 可以观察到一个 Action 。更改被发出，例如被 react-redux connect 使用.

简而言之:永远不会改变状态。代替 Object.assign 您可以使用 stage-3 传播语法:

{...previousState,...changes}

另请注意，数组也是如此!