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

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

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

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

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

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

让我们开始吧！

---

项目概述：全球购物车

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

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

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

设置和初始文件

首先，初始化您的 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 id="Products">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;

---

最后的处理：记忆和优化

随着应用程序的增长，优化性能至关重要。这里有一些提示：

1. Memoize Components：使用 React.memo 来防止依赖于状态的组件不必要的重新渲染。
2. 单独的上下文：如果产品和购物车上下文变得太大，请考虑将它们分开，以允许更有针对性的状态更新。

回顾和结论

在本高级指南中，我们使用 useContext 和 useReducer 来管理全局购物车。主要要点包括：

1. 复杂的状态管理：useReducer 简化了管理复杂的操作和计算。
2. 使用 useContext 的全局状态：使状态可以跨组件树访问。
3. 可扩展模式：在上下文中分离状态和操作可以实现更清晰、更模块化的代码。

尝试将此方法应用于您的项目，看看它如何提高应用程序的可扩展性和性能。快乐编码！ ？

以上是React 中使用 useContext 和 useReducer 进行状态管理：构建全局购物车的详细内容。更多信息请关注PHP中文网其他相关文章！