React JS使用useReducer校验购物车是否存在待添加商品

开发购物车功能时遇到「同一商品被重复添加进购物车列表」的问题，检索相关实现时没找到足够完善的参考方案，自行调试排查后解决，现将具体实现整理如下，供有相同需求的开发者参考。

我使用Context API搭配useReducer实现购物车核心逻辑，初始未做校验的版本代码如下，这个版本会无差别把所有触发添加动作的商品塞进购物车数组，直接导致重复商品问题：

switch (action.type) {
  case ADD_TO_CART:
    return {
      ...state,
      basket: [...state.basket, action.payload]
    }
}

修复逻辑 #

核心是在执行添加操作前，先校验当前购物车中是否已经存在对应商品，这里直接用JavaScript原生find()方法即可实现，不需要引入额外工具库。修复后的完整reducer代码如下：

export const commerceReducer = (state, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      // 匹配购物车中是否存在id和待添加商品一致的条目
      const itemExists = state.basket.find(
        (item) => item.id === action.payload.id
      )
      // 调试阶段可打印匹配结果排查问题，生产环境可删除
      console.log(itemExists)

      // 仅当商品不存在时，才执行新增购物车条目的操作
      if (!itemExists) {
        return {
          ...state,
          basket: [...state.basket, action.payload]
        }
      }
      // 若需要商品已存在时给用户提示，可在此处添加对应弹窗/提示逻辑
      // 若业务需求为已存在商品则累加数量，替换上述if块内逻辑即可
      return state
  }
}

提示：上述重复校验逻辑不绑定特定技术栈，只要是用数组存储购物车条目，都可以用相同思路实现去重判断。

内容的提问来源于stack exchange，提问作者Martinz Nnaji Jr