react-redux – 在减速机中改变状态有什么后果？

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中的代码块.)

变异状态是React中的反模式. React使用渲染引擎,该引擎取决于状态变化是可观察的这一事实.通过比较先前状态和下一状态来进行该观察.它将改变带有差异的虚拟dom,并将更改的元素写回dom.

当你改变内部状态时,React不知道发生了什么变化,甚至更糟;它的当前状态的概念是不正确的.所以dom和虚拟dom将变得不同步.

Redux使用相同的想法来更新它的商店;减速器可以观察到一个动作,它可以计算商店的下一个状态.发出更改,例如react-redux connect消耗.

所以简而言之：从来没有,改变状态.您可以使用stage-3扩展语法代替Object.assign：

{...previousState,...changes}

另请注意,阵列也是如此！