Redux状态中高效重置单选框再设目标选中的实现疑问

我明白你纠结的点——既要符合Redux的不可变更新规则，又想高效地把所有radio类型的项重置为未选中，同时不影响其他控件。先说说你之前代码的问题：Object.assign的参数是对象，不是函数，所以你写的那个回调根本不会执行，反而会把函数当成一个属性塞进新对象里，这就是代码跑不通的原因。

下面给你两种高效的实现方式，都是只遍历一次状态对象，而且完全符合Redux的不可变要求：

方法一：用Object.entries + Object.fromEntries（简洁直观） #

这种写法利用原生的键值对遍历API，代码可读性很高：

const state = { 
  'some_id_1': { type: 'radio', id: 'some_id_1', checked: true }, 
  'some_id_2': { type: 'radio', id: 'some_id_2', checked: false }, 
  'some_id_3': { type: 'checkbox', id: 'some_id_3', checked: false } 
};

// 第一步：重置所有radio为未选中
const resetRadioState = Object.fromEntries(
  Object.entries(state).map(([key, item]) => {
    // 只修改radio类型的项，创建新对象避免修改原状态
    if (item.type === 'radio') {
      return [key, { ...item, checked: false }];
    }
    // 其他类型直接保留原项
    return [key, item];
  })
);

// 第二步：设置目标单选框为选中（假设目标ID是'some_id_2'）
const targetRadioId = 'some_id_2';
const finalState = {
  ...resetRadioState,
  [targetRadioId]: { ...resetRadioState[targetRadioId], checked: true }
};

方法二：用reduce遍历（性能和第一种差不多，适合习惯函数式写法的开发者） #

如果你更习惯用reduce来处理对象遍历，也可以这么写：

const resetRadioState = Object.keys(state).reduce((newState, key) => {
  const currentItem = state[key];
  newState[key] = currentItem.type === 'radio' 
    ? { ...currentItem, checked: false } 
    : currentItem;
  return newState;
}, {});

// 同样，后续设置目标单选框的代码和上面一致

为什么这两种方法高效？ #

它们都只遍历了一次状态对象，所有radio的重置操作在一次遍历中完成，没有额外的冗余计算。而且用对象展开运算符{...item}创建新对象，既保证了不可变性，又比Object.assign更简洁（当然用Object.assign({}, item, {checked: false})也可以，只是写法长一点）。

相比你之前想的“先遍历重置再合并”，这两种写法把逻辑整合在了一次遍历里，代码更紧凑，性能也没有损耗——原生的遍历API已经是最优的实现了，没必要追求更“极致”的方法（除非你的状态对象大到十万级别的规模，但这种情况在表单场景里几乎不会出现）。

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