Question

我正在尝试查看状态json中是否已存在该ID，然后将该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',
  }
}

这里你的减速器将如何处理新值：

第一步

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;
  }
}

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

1 个答案: