React+Redux购物车商品数量逐次递减功能实现遇阻求助

嘿，我太懂你的烦恼了——网上搜Redux购物车，大多只讲怎么加商品或者直接删掉，偏偏漏掉了这种逐次减数量的真实场景需求！让我帮你搞定这个功能。

首先，先明确Redux购物车的标准状态结构（如果你的结构不一样，可以参考调整），通常我们会用两个状态切片来管理：

• addedIds: 存储购物车中所有存在数量的商品ID数组
• quantityById: 存储每个商品ID对应的数量对象

第一步：定义动作类型和动作创建函数 #

首先新增一个用于递减数量的动作类型，再写对应的动作创建函数：

// 动作类型常量
export const ADD_TO_CART = 'ADD_TO_CART';
export const DECREMENT_QUANTITY = 'DECREMENT_QUANTITY';

// 添加商品到购物车
export const addToCart = (productId) => ({
  type: ADD_TO_CART,
  productId
});

// 递减商品数量（需要传入当前数量，方便reducer判断是否要移除商品）
export const decrementQuantity = (productId, currentQuantity) => ({
  type: DECREMENT_QUANTITY,
  productId,
  currentQuantity
});

第二步：修改/新增数量管理的Reducer #

如果你还没有quantityById的Reducer，先创建它；如果已有，新增DECREMENT_QUANTITY的处理逻辑：

const initialState = {
  addedIds: [],
  quantityById: {}
};

const quantityById = (state = initialState.quantityById, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      // 商品已存在则数量+1，否则初始化为1
      const currentAddQuantity = state[action.productId] || 0;
      return {
        ...state,
        [action.productId]: currentAddQuantity + 1
      };
    case DECREMENT_QUANTITY:
      const currentQuantity = state[action.productId];
      // 如果当前数量是1，减完后移除该商品的数量记录
      if (currentQuantity === 1) {
        const newState = { ...state };
        delete newState[action.productId];
        return newState;
      }
      // 否则数量-1
      return {
        ...state,
        [action.productId]: currentQuantity - 1
      };
    default:
      return state;
  }
};

第三步：修改你的addedIds Reducer #

现在更新你提供的addedIds Reducer，新增对递减动作的处理——只有当商品数量减到0时，才从数组中移除该ID：

const addedIds = (state = initialState.addedIds, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      // 商品已存在则不修改数组，否则添加ID
      if (state.indexOf(action.productId) !== -1) {
        return state;
      }
      return [...state, action.productId];
    case DECREMENT_QUANTITY:
      // 如果当前数量是1，减完后数量为0，移除该ID
      if (action.currentQuantity === 1) {
        return state.filter(id => id !== action.productId);
      }
      // 数量还大于0，数组保持不变
      return state;
    default:
      return state;
  }
};

第四步：合并Reducer并在组件中使用 #

把两个Reducer合并成购物车的根Reducer：

import { combineReducers } from 'redux';

const cartReducer = combineReducers({
  addedIds,
  quantityById
});

export default cartReducer;

然后在React组件中调用这些动作（以函数组件为例）：

import { useSelector, useDispatch } from 'react-redux';
import { addToCart, decrementQuantity } from './cartActions';

const CartItem = ({ product }) => {
  const dispatch = useDispatch();
  // 获取当前商品的数量
  const quantity = useSelector(state => state.cart.quantityById[product.id] || 0);

  return (
    <div className="cart-item">
      <h4>{product.name}</h4>
      <p>当前数量: {quantity}</p>
      <button onClick={() => dispatch(addToCart(product.id))}>+ 增加</button>
      {/* 只有数量大于0时显示减号按钮 */}
      {quantity > 0 && (
        <button onClick={() => dispatch(decrementQuantity(product.id, quantity))}>- 减少</button>
      )}
    </div>
  );
};

逻辑说明 #

• 点击“增加”按钮：如果商品不在购物车则添加ID到addedIds，同时数量加1；已存在则只加数量。
• 点击“减少”按钮：如果当前数量是1，减完后数量变为0，会从addedIds中移除该ID，并删除quantityById中的对应记录；如果数量大于1，只减少数量，购物车中保留该商品。

这样就完美实现了你要的基于计数的递减功能，而不是直接移除商品啦！

内容的提问来源于stack exchange，提问作者Techi Girl