如何优化useReducer中对象数组的更新逻辑？

优化实现 #

你可以通过合并重复逻辑、遵循不可变更新规则大幅简化代码，以下是最优实现：

// 可先合并原有的Checked/UnChecked两个Action类型为单个UpdateChecked
const reducer = (state: StateType, action: Action) => {
  const { type, payload } = action;
  switch (type) {
    case ActionKind.UpdateChecked:
      return {
        ...state,
        items: state.items.map(item => 
          item.id === payload.id ? {...item, checked: payload.checked} : item
        )
      };
    default:
      return state;
  }
};

如果你的需求是点击切换选中状态，无需外部指定checked值，还可以进一步简化为自动取反的版本：

case ActionKind.ToggleChecked:
  return {
    ...state,
    items: state.items.map(item => 
      item.id === payload.id ? {...item, checked: !item.checked} : item
    )
  };

核心优化说明 #

• 合并了两个重复的分支逻辑，删除无用的临时变量，代码量缩减超过一半
• 修复了原代码直接修改原状态对象的隐患：原代码中const it = item属于引用赋值，直接修改it.checked等价于修改state中的原item对象，违反React状态不可变原则，容易导致渲染异常，优化后通过对象展开运算符返回新对象实现安全的不可变更新
• 若使用切换状态的方案，还可以减少调用方的判断逻辑，不需要提前查询当前选中状态再分发对应Action

内容的提问来源于stack exchange，提问作者ThunD3eR