构建一个基于React和Redux的简易电商购物车应用

npx create-react-app shopping-cart-app
cd shopping-cart-app
npm install redux react-redux redux-thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

export const ADD_TO_CART = 'ADD_TO_CART';
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
export const UPDATE_CART_ITEM_QUANTITY = 'UPDATE_CART_ITEM_QUANTITY';
export function addToCart(product) {
  return {
    type: ADD_TO_CART,
    payload: product,
  };
}
export function removeFromCart(productId) {
  return {
    type: REMOVE_FROM_CART,
    payload: productId,
  };
}
export function updateCartItemQuantity(productId, quantity) {
  return {
    type: UPDATE_CART_ITEM_QUANTITY,
    payload: { productId, quantity },
  };
}

import { ADD_TO_CART, REMOVE_FROM_CART, UPDATE_CART_ITEM_QUANTITY } from './actions';
const initialState = {
  cart: [],
};
function cartReducer(state = initialState.cart, action) {
  switch (action.type) {
    case ADD_TO_CART:
      // 简化处理，假设每个商品只有一个实例在购物车中
      const existingItem = state.find((item) => item.id === action.payload.id);
      if (existingItem) {
        return state.map((item) =>
          item.id === action.payload.id ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      return [...state, { ...action.payload, quantity: 1 }];
    case REMOVE_FROM_CART:
      return state.filter((item) => item.id !== action.payload);
    case UPDATE_CART_ITEM_QUANTITY:
      return state.map((item) =>
        item.id === action.payload.productId ? { ...item, quantity: action.payload.quantity } : item
      );
    default:
      return state;
  }
}
export default {
  cart: cartReducer,
};
// 组合reducers
export const rootReducer = (state = {}, action) => {
  return {
    cart: cartReducer(state.cart, action),
  };
};

// ... 省略import语句和样式
function ProductList({ products, addToCart }) {
  return (
    <div>
      <h2>商品列表</h2>
      <ul>
        {products.map((product) => (
          <Product key={product.id} product={product} addToCart={addToCart} />
        ))}
      </ul>
    </div>
  );
}
// ... 省略export语句

// ... 省略import语句和样式
function Product({ product, addToCart }) {
  return (
    <li>
      <h3>{product.name}</h3>
      <p>{product.price}</p>
      <button onClick
={() => addToCart(product)}>添加到购物车</button>
    </li>
  );
}
// ... 省略export语句

// ... 省略import语句和样式
function Cart({ cart, removeFromCart, updateCartItemQuantity }) {
  return (
    <div>
      <h2>购物车</h2>
      {cart.length === 0 ? (
        <p>购物车为空</p>
      ) : (
        <ul>
          {cart.map((item) => (
            <CartItem
              key={item.id}
              item={item}
              removeFromCart={removeFromCart}
              updateCartItemQuantity={updateCartItemQuantity}
            />
          ))}
        </ul>
      )}
    </div>
  );
}
// ... 省略export语句和connect函数（如果使用react-redux的connect）

// ... 省略import语句和样式
function CartItem({ item, removeFromCart, updateCartItemQuantity }) {
  return (
    <li>
      <h3>{item.name}</h3>
      <p>数量: {item.quantity}</p>
      <p>单价: {item.price}</p>
      <p>总价: {item.price * item.quantity}</p>
      <button onClick={() => removeFromCart(item.id)}>删除</button>
      <button onClick={() => updateCartItemQuantity(item.id, item.quantity - 1)} disabled={item.quantity === 1}>
        -
      </button>
      <button onClick={() => updateCartItemQuantity(item.id, item.quantity + 1)}>+</button>
    </li>
  );
}
// ... 省略export语句和connect函数（如果使用react-redux的connect）

// ... 省略import语句
function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <ProductList /* ... 传递props */ />
        <Cart /* ... 传递props */ />
      </div>
    </Provider>
  );
}
export default App;