如何在Redux购物车中添加同商品不同尺寸规格的商品

当前购物车仅通过商品id判断条目唯一性，无法区分同一商品的不同尺寸规格。以下是修改后的代码，通过商品id+尺寸作为唯一标识，实现不同规格商品的独立管理：

修改后的Reducer代码 #

const initialState = {
  products: ProductData,
  cart: [],
};
 
const reducer = (state = initialState, action)=>{
    switch(action.type){
        case 'ADD':
            // 从商品列表匹配目标商品
            const product = state.products.find(p => p.id === action.payload.id);
            // 用id+size判断商品是否已在购物车
            const inCart = state.cart.find(item => 
                item.id === action.payload.id && item.size === action.payload.size
            );
        
            return {
                ...state,
                cart: inCart
                    ? state.cart.map(item =>
                        item.id === action.payload.id && item.size === action.payload.size
                            ? { ...item, qty: item.qty + 1 }
                            : item
                    )
                    : [...state.cart, { ...product, size: action.payload.size, qty: 1 }],
            };
            
        case 'DELETE':
            return {
                ...state,
                cart: state.cart.filter(item => 
                    item.id !== action.payload.id || item.size !== action.payload.size
                ),
            };
       
        case 'INCREASE':
            const tempCart = state.cart.map(cartItem => {
                if (cartItem.id === action.payload.id && cartItem.size === action.payload.size) {
                    return { ...cartItem, qty: cartItem.qty + 1 };
                }
                return cartItem;
            });
            return { ...state, cart: tempCart };
        
        case 'DECREASE':
            const temp = state.cart.map(cartItem => {
                if (cartItem.id === action.payload.id && cartItem.size === action.payload.size) {
                    return { ...cartItem, qty: cartItem.qty - 1 };
                }
                return cartItem;
            })
            .filter(cartItem => cartItem.qty !== 0);
            return { ...state, cart: temp };
              
        case 'CLEAR':
            return {...state, cart: []}
           
        default:
            throw new Error(`unknown action: ${action.type}`)
    }
}

修正后的Product Data（修复语法错误） #

export const ProductData = [
  {
    id: 'C1',
    name:'Coffee',
    categories: [1],
    price: 15.00,
    prices: [
      {size: 'S', price: '1.38', currency: '$'},
      {size: 'M', price: '3.15', currency: '$'},
      {size: 'L', price: '4.29', currency: '$'},
    ],
  },
  {
    id: 'C2',
    name: "Coffee",
    icon: icons.coffee_1,
    categories: [1,2],
    price: 15.00,
    prices: [
      {size: 'S', price: '1.38', currency: '$'},
      {size: 'M', price: '3.15', currency: '$'},
      {size: 'L', price: '4.29', currency: '$'},
    ],
  }
]

关键修改说明 #

• 唯一性判断升级：将原有的单一id判断改为id+size组合判断，同一商品的不同尺寸会被视为独立购物车条目。
• Action Payload要求：触发ADD/INCREASE/DECREASE/DELETE动作时，必须传入id和size两个字段，示例：

  // 添加C1商品的S规格
  dispatch({ type: 'ADD', payload: { id: 'C1', size: 'S' } })
  

• 购物车条目扩展：新增条目会携带size字段，方便后续匹配对应规格的价格信息。
• 语法修复：修正了原ProductData中的括号不匹配问题，确保数据结构合法。

内容的提问来源于stack exchange，提问作者Bashamlan Salem