React 中使用 useContext 和 useReducer 进行状态管理：构建全局购物车-js教程-PHP中文网

State Management with useContext and useReducer in React: Building a Global Shopping Cart

React 中使用 useContext 和 useReducer 进行高级状态管理：构建全局购物车

在上一篇文章中，我们介绍了结合 useContext 和 useReducer 来在 React 应用程序中有效管理全局状态的概念。我们通过构建一个简单的待办事项列表来演示这一点。现在，我们将更进一步，将这些概念应用到一个更复杂的现实示例中——全球购物车。

本指南将介绍如何管理多个状态和操作，例如添加、更新和删除项目以及计算总数，同时保持应用程序的可扩展性和性能。

在第二部分中，您将学习：

使用 useReducer 处理更复杂的状态。
创建灵活的上下文提供程序以全局管理状态和操作。
实现高级减速器函数来执行计算并处理各种类型的操作。
优化组件性能通过记忆来获得更好的性能。

让我们开始吧！

项目概述：全球购物车

我们的购物车应用程序将具有：

产品列表：一组可添加到购物车的商品。
购物车功能：用户可以添加、更新和删除购物车中的商品。
购物车总计：计算并显示商品总数和总价。

我们将从设置上下文和减速器开始，然后构建组件来展示功能。

设置和初始文件

首先，初始化您的 React 项目并设置基本文件夹结构：

src/
├── CartContext.js
├── CartProvider.js
├── ProductList.js
├── Cart.js
└── App.js

登录后复制

步骤一：创建初始状态和Reducer

我们将从代表空购物车和一组示例产品的初始状态开始。

初始状态：

// Initial state structure
const initialState = {
  products: [
    { id: 1, name: "Product A", price: 30 },
    { id: 2, name: "Product B", price: 20 },
    { id: 3, name: "Product C", price: 50 }
  ],
  cart: [],
  totalItems: 0,
  totalPrice: 0
};

登录后复制

减速器功能：

我们将设置一个 cartReducer 函数来处理各种操作，例如添加商品、更新商品数量、删除商品和计算总计。

src/
├── CartContext.js
├── CartProvider.js
├── ProductList.js
├── Cart.js
└── App.js

登录后复制

解释

ADD_TO_CART：将商品添加到购物车，如果已存在则增加数量。
REMOVE_FROM_CART：根据 ID 删除项目。
UPDATE_QUANTITY：更新购物车中商品的数量。
CALCULATE_TOTALS：计算购物车中的商品总数和总价。

第 2 步：创建上下文和提供者

现在，我们将创建一个上下文和提供者来全局传递我们的状态和调度函数。这将允许所有组件访问购物车状态和操作。

CartContext.js

// Initial state structure
const initialState = {
  products: [
    { id: 1, name: "Product A", price: 30 },
    { id: 2, name: "Product B", price: 20 },
    { id: 3, name: "Product C", price: 50 }
  ],
  cart: [],
  totalItems: 0,
  totalPrice: 0
};

登录后复制

第 3 步：构建组件

设置了提供程序和上下文后，我们现在可以为 产品列表 和 购物车创建组件。

产品列表组件

ProductList 组件将显示可用产品列表，并允许用户将产品添加到购物车。

ProductList.js

function cartReducer(state, action) {
  switch (action.type) {
    case "ADD_TO_CART": {
      const item = state.cart.find(item => item.id === action.payload.id);
      const updatedCart = item
        ? state.cart.map(cartItem =>
            cartItem.id === item.id
              ? { ...cartItem, quantity: cartItem.quantity + 1 }
              : cartItem
          )
        : [...state.cart, { ...action.payload, quantity: 1 }];

      return { ...state, cart: updatedCart };
    }

    case "REMOVE_FROM_CART": {
      const updatedCart = state.cart.filter(item => item.id !== action.payload);
      return { ...state, cart: updatedCart };
    }

    case "UPDATE_QUANTITY": {
      const updatedCart = state.cart.map(item =>
        item.id === action.payload.id
          ? { ...item, quantity: action.payload.quantity }
          : item
      );
      return { ...state, cart: updatedCart };
    }

    case "CALCULATE_TOTALS": {
      const { totalItems, totalPrice } = state.cart.reduce(
        (totals, item) => {
          totals.totalItems += item.quantity;
          totals.totalPrice += item.price * item.quantity;
          return totals;
        },
        { totalItems: 0, totalPrice: 0 }
      );
      return { ...state, totalItems, totalPrice };
    }

    default:
      return state;
  }
}

登录后复制

购物车组件

购物车组件显示购物车中的商品，允许更新数量、删除商品，并显示商品总数和价格。

Cart.js

import React, { createContext, useReducer } from 'react';

export const CartContext = createContext();

export function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

登录后复制

解释

handleRemove：从购物车中删除商品。
handleUpdateQuantity：更新所选商品的数量。
商品总数和价格：购物车组件根据状态中的计算值显示商品总数和价格。

第 4 步：使用 Provider 包装应用程序

为了确保所有组件都可以访问购物车状态，请将整个应用程序包装在 CartProvider 中。

App.js

import React, { useContext } from 'react';
import { CartContext } from './CartContext';

function ProductList() {
  const { state, dispatch } = useContext(CartContext);

  const handleAddToCart = (product) => {
    dispatch({ type: "ADD_TO_CART", payload: product });
    dispatch({ type: "CALCULATE_TOTALS" });
  };

  return (
    <div>
      <h2>Products</h2>
      <ul>
        {state.products.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
            <button onClick={() => handleAddToCart(product)}>Add to Cart</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

登录后复制