如何在未知外层属性键时删除Reducer对象内的指定子项

核心逻辑不需要提前获取待删除项所属的外层键，直接遍历原对象的键做过滤即可，全程不会破坏原有对象结构，也符合reducer不可变更新的要求。

具体实现步骤 #

• 遍历clientData的所有外层键，不需要提前知道待删除项属于哪个键
• 对每个键对应的人员数组，用filter过滤掉匹配待删除条件的项，生成新的数组引用
• 组装为新的clientData对象，完整保留原有的外层键结构，不会出现Object.values()转数组丢key的问题
• 最后返回合并了新clientData的全新state引用，符合reducer纯函数要求

代码示例 #

// reducer内对应删除逻辑的case
case 'DELETE_CLIENT_ENTRY': {
  // 从action载荷中取待删除项的匹配条件，示例为删除ID=2222、name=Stan的条目
  const { targetId, targetName } = action.payload;
  const updatedClientData = {};

  // 遍历原clientData所有外层键
  Object.keys(state.clientData).forEach(groupKey => {
    // 过滤掉匹配删除条件的条目，生成新数组
    updatedClientData[groupKey] = state.clientData[groupKey].filter(item => {
      // 匹配规则可按需调整，这里是同时匹配ID和name才删除
      return !(item.ID === targetId && item.name === targetName);
    });
  });

  return {
    ...state,
    clientData: updatedClientData
  };
}

补充说明 #

• 该方案完整保留原clientData的对象结构，外层的1080、1090这类分组键不会丢失
• 全程没有直接修改原state的对象/数组，所有更新都生成新引用，符合Redux的数据流要求
• 常规前端业务场景下这类分组数据量级很小，全量遍历键的性能开销完全可以忽略，不需要额外维护ID到分组键的映射表，除非单组数据量过万再考虑做索引优化。

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