如果操作 id 不存在，则 React/Redux 更新状态数组

Question

我有一组操作来更新 Redux 状态。 我正在努力过滤最终结果。 这是我的行动

1. GET_ITEMS （GET 请求，返回一个列表）
2. SET_ITEM （POST 请求， payload: 'id' ）
3. DELETE_ITEM （删除请求， payload: 'id' ）

以下是我的例子：

case 'GET_ITEMS':
  return {
    ...state,
    list: action.payload, // [{ id: 'one', count: 1 }, { id: 'two', count: 2}]
  };
case 'SET_ITEM':
  return {
    ...state,
    list: [...state.list, { id: action.payload, count: state.list.length }],
  };
case 'DELETE_ITEM':
  return {
    ...state,
    list: state.list.filter(item => item.id !== action.payload),
  };

只有 GET_ITEMS 操作类型返回响应数据，其余的我必须手动更新它们。 波纹管是我的问题在相同的顺序

1. 与响应数据列表数组相比，如何更新状态列表数组？
2. 如何根据 id 操作负载添加对象项？
3. 删除似乎工作正常

Answer 1

您可以为 SET_ITEM 操作使用辅助函数：

case 'SET_ITEM':
  return {
    ...state,
    list: updateList(state.list, action)
  };

function updateList(list, action) {
    const found = list.find((element) => element.id === action.payload);
    if (found) {
      // ...update found props
      return list;
    }
    return [...list, { id: action.payload, count: list.length + 1 }];
}

我肯定会将 count 属性移到元素之外，因为按照它的建模方式，每个元素都会有不必要的 count 属性，如果我们删除数组中间的元素，则数组上的每个元素的 count 属性都会出错右边。 所以更好的状态是：

{
   ...state,
   list,
   listCount
}