React Redux技术咨询：如何将嵌套if else转换为switch语句？

嘿，作为React Redux新手，遇到这种语法转换的问题太正常啦！咱们一步步来把你这段代码改成switch结构——其实核心就是把最外层判断action.type的逻辑换成switch，内部的业务分支保留if-else就好（毕竟那是针对两种状态的判断，用if-else反而更直观）。

先贴一下你原来的代码：

if (action.type === ADD_TO_CART) { 
  let addedItem = state.jeans.find((item) => item.id === action.id); 
  let existed_item = state.addedItems.find((item) => action.id === item.id); 
  if (existed_item) { 
    addedItem.quantity += 1; 
    return { ...state.jeans, total: state.total + addedItem.price, }; 
  } else { 
    addedItem.quantity = 1; 
    let newTotal = state.total + addedItem.price; 
    return { ...state, addedItems: [...state.addedItems, addedItem], total: newTotal, }; 
  } 
}

转换后的Switch版本代码 #

switch (action.type) {
  case ADD_TO_CART: {
    // 找到要添加的目标商品
    const addedItem = state.jeans.find(item => item.id === action.id);
    // 检查购物车中是否已存在该商品
    const existedItem = state.addedItems.find(item => item.id === action.id);

    if (existedItem) {
      // 注意：不要直接修改原state对象，这里创建商品副本更新数量
      const updatedItem = { ...addedItem, quantity: addedItem.quantity + 1 };
      // 更新购物车列表里的对应商品
      const updatedAddedItems = state.addedItems.map(item => 
        item.id === action.id ? updatedItem : item
      );
      // 返回完整的新state，保留原有属性只修改需要更新的部分
      return {
        ...state,
        addedItems: updatedAddedItems,
        total: state.total + updatedItem.price
      };
    } else {
      // 给新商品设置初始数量1，同样用副本避免修改原state
      const newCartItem = { ...addedItem, quantity: 1 };
      const newTotal = state.total + newCartItem.price;
      return {
        ...state,
        addedItems: [...state.addedItems, newCartItem],
        total: newTotal
      };
    }
  }
  // 必须添加default分支，处理未匹配的action，返回原state
  default:
    return state;
}

几个关键细节说明： #

• 外层判断转Switch：把原来的if (action.type === ADD_TO_CART)换成switch(action.type)，对应的case ADD_TO_CART就是我们要处理的核心分支，后续如果要加其他action类型（比如REMOVE_FROM_CART），直接加新的case就行，比嵌套if更清晰。
• 修正原代码的小bug：你原来代码里第一个return写了...state.jeans，这会导致返回的state丢失addedItems、total这些关键属性，我改成了...state——这是Redux reducer的基本规则：必须返回完整的state副本。
• 避免直接修改State：Redux要求不能直接mutate原state对象，所以我把直接修改addedItem.quantity的操作改成了创建新对象副本，这能避免很多难以排查的状态异常问题。
• Default分支不能少：Switch语句一定要加default分支，返回原state，这样当其他类型的action触发时，reducer能正确返回原有状态，不会导致状态丢失。

内容的提问来源于stack exchange，提问作者Kanwarjeet Singh