如何在Reducer中实现对象数组同key值更新、不存在则新增

核心处理规则 #

• 每次接收单key格式的payload时，先提取payload的属性名
• 遍历原filterArray，检查是否存在属性名和payload属性名一致的对象
• 存在匹配项时，用payload替换原有同key对象，保证不直接修改原状态
• 不存在匹配项时，将payload追加到数组末尾
• 全程返回新的数组引用，符合Redux reducer的不可变数据要求

完整实现代码 #

// reducer内对应更新过滤条件的处理分支
case 'UPDATE_FILTER_OPTION':
  // 单key格式payload直接取第一个属性名即可
  const targetKey = Object.keys(action.payload)[0];
  // 标记是否已存在同key配置
  const keyExisted = state.filterArray.some(item => Object.keys(item)[0] === targetKey);

  return {
    ...state,
    filterArray: keyExisted
      ? state.filterArray.map(item => 
          Object.keys(item)[0] === targetKey ? action.payload : item
        )
      : [...state.filterArray, action.payload]
  };

效果验证 #

初始filterArray值：
[{bestTimeToVisit: 'Before 10am'}, {bestDayToVisit: 'Monday'}]

1. 传入{bestTimeToVisit: 'After 10am'}：匹配到已有key，替换后数组为[{bestTimeToVisit: 'After 10am'}, {bestDayToVisit: 'Monday'}]
2. 传入{bestDayToVisit: 'Tuesday'}：匹配到已有key，替换后数组为[{bestTimeToVisit: 'Before 10am'}, {bestDayToVisit: 'Tuesday'}]
3. 传入{distanceLimit: '5km'}：无匹配key，追加后数组末尾新增该对象

注意：示例中Monday、Tuesday属于字符串值，实际编码时需要给值加单/双引号，否则会被识别为未声明的变量抛出错误。

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