Redux新手求助：React书店项目实现图书加购及购物车图标计数功能

1. 定义购物车相关Action类型和创建函数 #

新建src/actions/cartActions.js文件，写入以下代码：

// 定义Action类型
export const ADD_TO_CART = 'ADD_TO_CART';

// 添加到购物车的Action创建函数
export const addToCart = (book) => {
  return {
    type: ADD_TO_CART,
    payload: book
  }
}

2. 创建购物车Reducer #

新建src/reducers/cartReducer.js文件，写入以下代码：

import { ADD_TO_CART } from "../actions/cartActions";

const initialState = {
  cartItems: [],
  totalPrice: 0,
  itemCount: 0
}

const cartReducer = (state = initialState, action) => {
  switch(action.type) {
    case ADD_TO_CART:
      // 判断当前图书是否已在购物车中
      const existedItem = state.cartItems.find(item => item.id === action.payload.id);
      if (existedItem) {
        // 已有同款图书则数量+1，总价累加
        const updatedItems = state.cartItems.map(item => 
          item.id === action.payload.id 
          ? {...item, quantity: item.quantity + 1} 
          : item
        )
        return {
          ...state,
          cartItems: updatedItems,
          totalPrice: state.totalPrice + action.payload.price,
          itemCount: state.itemCount + 1
        }
      } else {
        // 没有同款图书则新增购物车条目
        const newItem = {...action.payload, quantity: 1}
        return {
          ...state,
          cartItems: [...state.cartItems, newItem],
          totalPrice: state.totalPrice + action.payload.price,
          itemCount: state.itemCount + 1
        }
      }
    default:
      return state;
  }
}

export default cartReducer;

3. 合并Reducer到根Store配置 #

找到根Reducer文件（通常为src/reducers/index.js），将购物车Reducer加入合并配置：

import { combineReducers } from "redux";
// 引入你项目中已有的其他reducer，比如图书列表相关reducer
import bookReducer from "./bookReducer";
import cartReducer from "./cartReducer";

const rootReducer = combineReducers({
  books: bookReducer,
  cart: cartReducer
})

export default rootReducer;

4. 绑定加入购物车触发事件 #

找到首页的图书卡片组件，导入依赖后给加入购物车按钮绑定点击事件：

import { useDispatch } from "react-redux";
import { addToCart } from "../actions/cartActions";

// 组件内部逻辑
const BookItem = ({book}) => {
  const dispatch = useDispatch();
  const handleAddToCart = () => {
    dispatch(addToCart(book))
  }

  return (
    // 原有图书卡片渲染代码，给按钮绑定事件
    <button onClick={handleAddToCart}>加入购物车</button>
  )
}

5. 改造ShopHeader组件获取购物车数据 #

修改你现有的shop-header.js文件，从Redux中读取购物车计数和总价：

import React from 'react';
import {Link} from 'react-router-dom'
import { useSelector } from 'react-redux';
import './shop-header.css';

const ShopHeader = () => {
  // 从Redux的cart模块中获取需要的数据
  const { itemCount: numItems, totalPrice: total } = useSelector(state => state.cart);
  return (
    <header className="shop-header row">
        <Link to= "/">
      <div className="logo text-dark">ReStore</div>
      </Link>
      <Link to="/cart">
      <div className="shopping-cart">
        <i className="cart-icon fa fa-shopping-cart" />
        {numItems} items (${total.toFixed(2)})
      </div>
      </Link>
    </header>
  );
};

export default ShopHeader;

配置检查 #

确认项目入口文件src/index.js已经用Provider包裹了根组件，否则组件无法读取Redux数据：

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

完成以上步骤即可实现添加图书到购物车、购物车图标展示商品计数的需求。

内容的提问来源于stack exchange，提问作者Тимур