React Redux项目中点击商品组件按钮如何同步更新同级购物车内容？

方案实现步骤 #

你当前的代码核心问题是加购逻辑没有和Redux打通，同时购物车组件的取值逻辑不符合同页面同级组件的使用场景，按以下步骤修改即可：

1. 调整商品组件（Product.js）

你需要在商品组件内直接调用Redux的dispatch触发加购action，修改后的完整代码如下：

import React, { useState } from 'react';
// 引入Redux相关依赖
import { useDispatch } from 'react-redux';
import { addToCart } from '../../actions/cartActions';

export default function Product(props) {
  const { product } = props;
  // 仅当你需要让用户自定义购买数量时保留这个状态，如果是固定每次加1可以删掉
  const [qty, setQty] = useState(1);
  const dispatch = useDispatch();

  const addToCartHandler = () => {
    // 触发加购action，传入当前商品id和要加的数量
    dispatch(addToCart(product._id, qty));
    // 如果是固定每次加1，上面直接写dispatch(addToCart(product._id, 1))即可，不需要本地qty状态
  };
  return (
    <div key={product._id} className="col-lg-3 col-md-3 col-sm-4 col-xs-6 product">
      <div className="card">
          <div className="image-area">

          </div>
      </div>
      <div className="products-body">
        <div className="price">${product.price}</div>
        <div className="product-name">{product.name}</div>
        <button className="add-button" onClick={addToCartHandler}>Add</button>
      </div>
    </div>
  );
}

2. 修正购物车action（cartActions.js）

你当前action的payload里商品id字段写错了，调整如下：

import Axios from 'axios';
import { CART_ADD_ITEM } from '../constants/cartConstants';

export const addToCart = (productId, qty) => async (dispatch, getState) => {
  const { data } = await Axios.get(`/api/products/${productId}`);
  dispatch({
    type: CART_ADD_ITEM,
    payload: {
      name: data.name,
      price: data.price,
      // 这里原代码写的data.added是错误的，应该取商品id
      product: data._id,
      qty,
    },
  });
  localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
};

3. 调整购物车组件（Cart.js）

你当前的购物车组件是从路由参数取商品id的逻辑，只适合跳转页面加购的场景，同页面展示需要直接从Redux store取购物车数据，修改后代码如下：

import React from "react";
// 引入useSelector从store取数据
import { useSelector } from "react-redux";

export default function Cart() {
  // 从Redux store取出购物车列表
  const cartItems = useSelector(state => state.cart.cartItems);
  return (
    <div className="cart-box">
      <h3>购物车</h3>
      {cartItems.map(item => (
        <p key={item.product}>
          商品ID: {item.product} 商品名: {item.name} 数量: {item.qty} 单价: ${item.price} 小计: ${item.price * item.qty}
        </p>
      ))}
      {/* 可自行加总价计算逻辑 */}
      <p>总价：${cartItems.reduce((sum, item) => sum + item.price * item.qty, 0)}</p>
    </div>
  );
}

4. 确保购物车reducer逻辑正确

你需要在cartReducer里实现商品重复加购时数量累加的逻辑，参考代码如下：

import { CART_ADD_ITEM } from '../constants/cartConstants';

// 初始化状态，从localStorage读历史数据
const initialState = {
  cartItems: localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')) : [],
};

export const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case CART_ADD_ITEM:
      const item = action.payload;
      // 判断商品是否已经在购物车中
      const existItem = state.cartItems.find(x => x.product === item.product);
      if (existItem) {
        // 存在则数量累加
        return {
          ...state,
          cartItems: state.cartItems.map(x => x.product === existItem.product ? {...x, qty: x.qty + item.qty} : x)
        };
      } else {
        // 不存在则新增商品
        return {
          ...state,
          cartItems: [...state.cartItems, item]
        };
      }
    default:
      return state;
  }
};

修改完成后就能实现点击商品的Add按钮，对应商品自动添加到购物车、重复点击数量累加的效果，不需要路由跳转。

内容的提问来源于stack exchange，提问作者magic bean