React-Redux实现首页与购物车页商品数量同步更新问题排查

• 首页ItemList组件渲染时每次遍历都强制赋值item.quantity = 1，会不断重置本地商品的数量值
• 首页展示的数量取自接口返回的本地dataList数组，但增减操作更新的是Redux存储的cart数组，两个数据源独立无关联，导致更新无法同步
• Reducer中存在冗余无效的INC类型逻辑，虽不影响当前功能但存在后续隐患

1. 修改ItemList的数量取值逻辑 #

首页商品数量统一从Redux的cart数组中取值，不要使用本地dataList的quantity字段，同时删除强制重置数量的代码，修改后核心渲染逻辑如下：

{dataList.map(item => {
  // 从Redux中查询当前商品的最新数量
  const cartItem = cart.find(cartItem => cartItem._id === item._id);
  const currentQty = cartItem ? cartItem.quantity : 1;
  return (
    // key要放在map返回的最外层节点上
    <div className="adding-button" key={item._id}>
      {isCart(item._id) ?
        <div className="cart">
          <div class="adding-qty">
            <button onClick={() => dispatch({ type: "INCREASE", payload: item })}>
              <span className="plus-qty">+</span>
            </button>
          </div>
          <div className="qty-info">
            <p>{currentQty}</p>
          </div>
          <div className="decrease-qty">
            <button
              onClick={() => {
                // 判断条件使用Redux中的最新数量
                if (currentQty > 1) {
                  dispatch({ type: "DECREASE", payload: item });
                } else {
                  dispatch({ type: "REMOVE", payload: item });
                }
              }}
            >
              <span className="minus-qty">-</span>
            </button>
          </div>
        </div>
        : <button onClick={() => dispatch({ type: "ADD", payload: item })}>
            Add To Cart
          </button>
      }
    </div>
  )
})}

2. 优化Reducer逻辑 #

删除冗余的INC类型逻辑，同时给新增购物车的商品设置默认初始数量，避免后续取值异常：

const Reducer = (state = initialState.cart, action) => {
  if (action.type === "ADD") {
    let tempcart = state.filter((item) => item._id === action.payload._id);
    if (tempcart.length == 0) {
      // 新增商品时统一设置初始数量为1
      return [...state, {...action.payload, quantity: 1}];
    } else {
      return state;
    }
  }
  if (action.type === "REMOVE") {
    return state.filter((item) => item._id !== action.payload._id);
  }
  if (action.type === "INCREASE") {
    return state.map((item) => {
      if (item._id === action.payload._id) {
        return { ...item, quantity: item.quantity + 1 };
      }
      return item;
    });
  }
  if (action.type === "DECREASE") {
    return state.map((item) => {
      if (item._id === action.payload._id) {
        return { ...item, quantity: item.quantity - 1 };
      }
      return item;
    });
  }
  return state;
};

修改完成后，首页和购物车页都是从同一个Redux数据源读取和更新商品数量，即可实现两边数量同步更新。

内容的提问来源于stack exchange，提问作者Chandan Ramesh