如何在Redux中创建cart状态 实现购物车数量更新与电影添加功能

1. 更新Action类型定义 #

给原来的ActionsTypes新增加购专属类型，原有的QUANTITY类型可以直接删除：

export const ActionsTypes = {
     SET_MOVIES : "SET_MOVIES",
     GET_MOVIE : "GET_MOVIE", 
     REMOVE_MOVIE : "REMOVE_MOVIE",
     ADD_TO_CART: "ADD_TO_CART" // 新增加购动作类型
 }

2. 新增加购Action创建函数 #

替换原有逻辑单一的MovieQuantity函数，新的动作会携带选中的电影和购买数量作为参数：

export const addItemToCart = (movie, buyQuantity) => {
    return {
        type : ActionsTypes.ADD_TO_CART,
        payload: {
            movie,
            quantity: buyQuantity
        }
    }
}

3. 新建cart reducer #

统一管理购物车商品列表和总数量，避免分开维护两个状态出现不同步的问题：

const cartInitialState = {
    items: [], // 存储所有加入购物车的电影、对应购买数量
    totalCount: 0 // 导航栏需要显示的总商品数，直接读取该字段即可
}

export const cartReducer = (state = cartInitialState, action) => {
    switch(action.type) {
        case ActionsTypes.ADD_TO_CART:
            const { movie, quantity } = action.payload
            // 优化逻辑：同个电影重复加购时累加购买数量，不需要新增重复条目
            const existedItemIndex = state.items.findIndex(item => item.movie.id === movie.id)
            let newItems
            if (existedItemIndex > -1) {
                newItems = [...state.items]
                newItems[existedItemIndex].quantity += quantity
            } else {
                newItems = [...state.items, { movie, quantity }]
            }
            return {
                ...state,
                items: newItems,
                totalCount: state.totalCount + quantity
            }
        default:  
            return state;
    }
}

4. 注册cart reducer #

在你合并根reducer的位置，新增cartReducer，同时删除原来的movieQuantityReducers注册逻辑：

import { combineReducers } from 'redux'
import { setMoviesReducers, GetMovieDetailsReducers, cartReducer } from './你的reducer文件路径'

const rootReducer = combineReducers({
    movies: setMoviesReducers,
    movie: GetMovieDetailsReducers,
    cart: cartReducer // 新增cart状态
})

5. 修改MovieDetails组件的加购逻辑 #

调整CartHandler，触发我们刚定义的加购动作：

// add to cart Handler
const CartHandler = () => {
    dispatch(addItemToCart(singleMovie, quantity))
}

6. 修改Navbar组件的取值逻辑 #

直接从cart状态读取总数量即可：

const Navbar = () => {
    const quantityBag = useSelector((state)=> state.cart.totalCount);
    return (
        <nav className="navBar-section">
            <Link to="/">
                <h1 className="logo">映画館</h1>
            </Link>

            <Badge badgeContent={quantityBag} color="primary">
                 <LocalMall className="icon-bag" />
            </Badge>
        </nav>
    )
}

可选清理 #

把原来没用的QUANTITY类型、MovieQuantity函数、movieQuantityReducers都删掉，减少冗余代码。

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