时间戳

首页 > 解决方案 > Redux 中的 reducer 必须严格返回一个新的 state 对象吗？

redux - Redux 中的 reducer 必须严格返回一个新的 state 对象吗？

问题描述

Redux 中 reducer 的一个规则是：我们应该将 state 视为只读，并返回一个新对象作为新 state。

但是有一个灰色地带：它必须严格返回一个新对象作为状态，还是我们可以返回相同的状态对象？

似乎通过查看常见代码，例如：

function favoriteColors(state, action) {
  if (state === undefined) {
    state = [];
  }

  if (action.type === 'ADD') {
    return Array.from(new Set([...state, action.color]));  // new array
  } else if (action.type === 'REMOVE') {
    return state.filter(color => color !== action.color);  // new array
  } else {
    return state;
  }
}

如果action.type未知，则返回相同的状态对象。所以规则是reducer不必严格返回一个新的状态对象，但可以返回相同的。但是严格的规则是状态必须是只读的？

标签： reduxredux-reducers

解决方案

规则是你不能改变状态对象，因为这可能会破坏代码中其他地方的假设。返回相同的状态对象是可以的。

function goodReducer(state, action) {
  return state;
}

function badReducer(state, action) {
  state.counter = (state.counter || 0) + 1;
  return state;
}

这样做的原因是为了确保渲染的 DOM 是正确的和最新的，对状态的更新必须通过调度程序。

尤其是：

  • 在不受控制的情况下改变对象会使缓存无效（例如shouldComponentUpdate）
  • 变异对象可能导致呈现不一致的状态（例如，如果变异发生在 a 期间render）

返回未修改的状态很好。事实上，像 Immutable.js 这样的库经常会这样做。

推荐阅读