javascript - 什么时候必须在 useReducer 中使用扩展运算符？

Question

我注意到在许多 useReducer 示例中，展开运算符在 reducer 中的使用方式如下:

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment1':
      return { ...state, count1: state.count1 + 1 };
    case 'decrement1':
      return { ...state, count1: state.count1 - 1 };
    case 'increment2':
      return { ...state, count2: state.count2 + 1 };
    case 'decrement2':
      return { ...state, count2: state.count2 - 1 };
    default:
      throw new Error('Unexpected action');
  }
};

然而，在我的许多实践中，我删除了 ...state 并且完全没有问题。我知道 ...state 用于保留剩余状态的状态，但是 reducer 会保留那些状态，所以不需要 ...state 吗？

有人能给我一些例子，其中 ...state 是必须的，并且在使用 useReducer 钩子(Hook)删除时会导致问题吗？提前致谢!

Answer 1

不，reducer 函数本身不会保留现有状态，您应该始终养成习惯浅拷贝现有状态。它将帮助您避免一类状态更新错误。

当传播现有状态可能时，我能想到的一个例子是它不是对象的情况。

例如:“计数”状态

const reducer = (state = 0, action) => {
  // logic to increment/decrement/reset state
};

例如:单个“status”状态

const reducer = (state = "LOADING", action) => {
  // logic to update status state
};

自新 状态对象以来，对于具有多个属性的任何状态对象，扩展现有状态是必须每次都返回，以保留所有未更新的现有状态属性。

编辑 1

Can you give an example when NO shallow copying causing state update bugs?

const initialState = {
  data: [],
  loading: false,
};

const reducer = (state, action) => {
  switch(action.type) {
    case LOAD_DATA:
      return {
        ...state,
        loading: true,
      };
    
    case LOAD_DATA_SUCCESS:
      return {
        ...state,
        data: action.data,
        loading: false
      };

    case LOAD_DATA_FAILURE:
      return {
        loading: false,
        error: action.error,
      };

    default:
      return state;
  }
};

从这个例子中可以看出，在数据加载失败时，reducer 忽略了将现有状态复制到新状态对象中。

const [state, dispatch] = useReducer(reducer, initialState);

...

useEffect(() => {
  dispatch({ type: LOAD_DATA });
  // logic to fetch and have loading failure
}, []);

return (
  <>
    ...
    {state.data.map(...) // <-- throws error state.data undefined after failure
    ...
  </>
);

任何假定 state.data总是 存在或总是一个数组的选择器或 UI 逻辑将失败并出现错误。初始渲染将工作，因为 state.data 是一个空数组并且可以被映射，但在加载错误时 state.data 将从状态中删除。