如何修改Redux实现点击按钮仅添加单个菜品到购物车？

1. 调整MenuItem.tsx的触发逻辑 #

原来的代码可能是传递分类ID来触发添加动作，现在要改成传递当前点击的单个菜品对象：

// 修改前（错误逻辑）
const handleAddToCart = () => {
  dispatch(addToCart(categoryId));
};

// 修改后（正确逻辑）
const handleAddToCart = () => {
  dispatch(addToCart(menuItem)); // menuItem是当前组件接收的单个菜品props
};

2. 更新Redux Action的类型定义 #

在你的action类型文件中，把ADD_TO_CART的payload类型从分类ID改为单个菜品对象：

// 先定义菜品类型（如果还没有的话）
export interface MenuItem {
  id: string;
  name: string;
  price: number;
  category: string;
  // 其他菜品属性
}

// 修改ADD_TO_CART的Action类型
export type AddToCartAction = { type: 'ADD_TO_CART', payload: MenuItem };

3. 修改rootReducer中的ADD_TO_CART处理逻辑 #

原来的reducer是根据分类ID批量添加菜品，现在要改成只添加单个菜品，同时处理重复添加时的数量累加：

// 修改前（错误逻辑）
case 'ADD_TO_CART':
  const categoryItems = initialState.menu.find(cat => cat.id === action.payload)?.items || [];
  return {
    ...state,
    cart: [...state.cart, ...categoryItems]
  };

// 修改后（正确逻辑）
case 'ADD_TO_CART':
  // 检查购物车中是否已存在该菜品
  const existingItemIndex = state.cart.findIndex(item => item.id === action.payload.id);

  if (existingItemIndex >= 0) {
    // 已有该菜品，数量加1
    const updatedCart = [...state.cart];
    updatedCart[existingItemIndex] = {
      ...updatedCart[existingItemIndex],
      quantity: (updatedCart[existingItemIndex].quantity || 1) + 1
    };
    return { ...state, cart: updatedCart };
  } else {
    // 无该菜品，添加新条目并初始化数量为1
    return {
      ...state,
      cart: [...state.cart, { ...action.payload, quantity: 1 }]
    };
  }

4. 适配Cart.tsx的渲染逻辑 #

确保购物车组件能正确渲染带数量的菜品条目：

{cart.map(item => (
  <div key={item.id} className="cart-item">
    <span>{item.name}</span>
    <span>数量: {item.quantity}</span>
    <span>总价: ${item.price * item.quantity}</span>
  </div>
))}

完成以上修改后，点击菜品的“Add To Cart”按钮就只会添加当前点击的单个菜品，重复点击会累加对应菜品的数量。

内容的提问来源于stack exchange，提问作者A. Hargrove