在reducer中检查ID是否存在于Redux状态

Question

我正在尝试查看该 ID 是否已存在于状态 json 中，然后将该 ID 的计数更新为 1。

export function cartReducer(state = {}, action) {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state, [action.payload._id]: {data: action.payload, count: 1}
      }

    default:
  }
  return state;
}

在状态下，它存储在 cartList 中

Answer 1

试试这个方法：

export function cartReducer(state = {}, action) {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        [action.payload._id]: {
          data: action.payload,
          count: state[action.payload._id] ? state[action.payload._id].count + 1 : 1,
        }
      }
    default:
      return state;
  }
}

---

编辑：下面在您的评论中详细回答您的问题

假设您已经获取数据并且您的cartReducer 具有以下值：

{
  1: { data: { _id: 1, name: 'Evian Bottle 1L' }, count: 1 },
  2: { data: { _id: 2, name: 'Coca Zero 1L' }, count: 1 },
}

1.用户首次将商品7Up 1L 添加到购物车中。您发送以下操作：

{
  type: 'ADD_TO_CART',
  payload: {
    _id: 3,
    name: '7Up 1L',
  }
}

这里你的 reducer 将如何处理新值：

第一步

return {
  ...state,
  [action.payload._id]: {
    data: action.payload,
    count: state[action.payload._id] ? state[action.payload._id].count + 1 : 1,
  }
}

第二步

return {
  1: { data: { _id: 1, name: 'Evian 1L' }, count: 1 },
  2: { data: { _id: 2, name: 'Coca Zero 1L' }, count: 1 },
  [action.payload._id]: {
    data: action.payload,
    count: state[action.payload._id] ? state[action.payload._id].count + 1 : 1,
  }
}

第三步

return {
  1: { data: { _id: 1, name: 'Evian 1L' }, count: 1 },
  2: { data: { _id: 2, name: 'Coca Zero 1L' }, count: 1 },
  3: {
    data: { _id: 3, name: '7Up 1L' },
    count: state[3] ? state[3].count + 1 : 1,
  }
}

第四步

return {
  1: { data: { _id: 1, name: 'Evian 1L' }, count: 1 },
  2: { data: { _id: 2, name: 'Coca Zero 1L' }, count: 1 },
  3: {
    data: { _id: 3, name: '7Up 1L' },
    count: 1,
  }
}

2.现在您的用户想要在购物车中添加另一个7Up 1L。调度行动：

{
  type: 'ADD_TO_CART',
  payload: {
    _id: 3,
    name: '7Up 1L',
  }
}

你的减速器：

第一步

return {
  ...state,
  [action.payload._id]: {
    data: action.payload,
    count: state[action.payload._id] ? state[action.payload._id].count + 1 : 1,
  }
}

第二步

return {
  1: { data: { _id: 1, name: 'Evian 1L' }, count: 1 },
  2: { data: { _id: 2, name: 'Coca Zero 1L' }, count: 1 },
  3: { data: { _id: 3, name: '7Up 1L' }, count: 1 },
  [action.payload._id]: {
    data: action.payload,
    count: state[action.payload._id] ? state[action.payload._id].count + 1 : 1,
  }
}

第三步

return {
  1: { data: { _id: 1, name: 'Evian 1L' }, count: 1 },
  2: { data: { _id: 2, name: 'Coca Zero 1L' }, count: 1 },
  3: { data: { _id: 3, name: '7Up 1L' }, count: 1 },
  3: {
    data: { _id: 3, name: '7Up 1L' },
    count: state[3] ? state[3].count + 1 : 1,
  }
}

第四步

return {
  1: { data: { _id: 1, name: 'Evian 1L' }, count: 1 },
  2: { data: { _id: 2, name: 'Coca Zero 1L' }, count: 1 },
  3: { data: { _id: 3, name: '7Up 1L' }, count: 1 },
  3: {
    data: { _id: 3, name: '7Up 1L' },
    count: 1 + 1,
  }
}

第五步

return {
  1: { data: { _id: 1, name: 'Evian 1L' }, count: 1 },
  2: { data: { _id: 2, name: 'Coca Zero 1L' }, count: 1 },
  3: { data: { _id: 3, name: '7Up 1L' }, count: 1 },
  3: {
    data: { _id: 3, name: '7Up 1L' },
    count: 2,
  }
}

第六步

return {
  1: { data: { _id: 1, name: 'Evian 1L' }, count: 1 },
  2: { data: { _id: 2, name: 'Coca Zero 1L' }, count: 1 },
  3: {
    data: { _id: 3, name: '7Up 1L' },
    count: 2,
  }
}

希望对你有帮助。

---

编辑 2：在评论中回答您的第二个问题：当我想从购物车中删除商品时会发生什么？

1.用户从他的购物车中删除了Evian 1L。您发送以下操作：

{
  type: 'REMOVE_FROM_CART',
  payload: {
    _id: 1,
  }
}

2。你这个减速机

export function cartReducer(state = {}, action) {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        [action.payload._id]: {
          data: action.payload,
          count: state[action.payload._id] ? state[action.payload._id].count + 1 : 1,
        }
      }
      case REMOVE_FROM_CART: {
        const foundItem = state[action.payload._id];

        if (foundItem && foundItem.count > 1) {
          return {
            ...state,
            [action.payload._id]: {
              ...foundItem,
              count: foundItem.count - 1,
            }
          }
        }

        // In a immutable way - Avoid using the delete keyword
        return Object
          .keys(state)
          .filter(key => key != _id)
          .reduce((result, item) => ({ ...result, [item]: state[item] }), {});
    }
    default:
      return state;
  }
}

编辑 3：在评论中回答您的第三个问题：如果计数已经达到 0 并且我们想再减去一项怎么办？

最好的方法是： 直接在组件中：在这个dispatch之前，检查count是否已经为0。

1. 如果是这样，请不要触发此调度，而是触发另一个允许您显示此消息的调度。
2. 否则，触发它。

在当前的 reducer 中，使用此答案中的书面代码，您将无法找到此 ID，因此无需更改 :) 希望对您有所帮助！