React 中使用 useContext 和 useReducer 進(jìn)行高級狀態(tài)管理：構(gòu)建全局購物車

在上一篇文章中，我們介紹了結(jié)合 useContext 和 useReducer 來在 React 應(yīng)用程序中有效管理全局狀態(tài)的概念。我們通過構(gòu)建一個簡單的待辦事項列表來演示這一點?，F(xiàn)在，我們將更進(jìn)一步，將這些概念應(yīng)用到一個更復(fù)雜的現(xiàn)實示例中——全球購物車。

本指南將介紹如何管理多個狀態(tài)和操作，例如添加、更新和刪除項目以及計算總數(shù)，同時保持應(yīng)用程序的可擴(kuò)展性和性能。

在第二部分中，您將學(xué)習(xí)：

1. 使用 useReducer 處理更復(fù)雜的狀態(tài)。
2. 創(chuàng)建靈活的上下文提供程序以全局管理狀態(tài)和操作。
3. 實現(xiàn)高級減速器函數(shù)來執(zhí)行計算并處理各種類型的操作。
4. 優(yōu)化組件性能通過記憶來獲得更好的性能。

讓我們開始吧！

---

項目概述：全球購物車

我們的購物車應(yīng)用程序?qū)⒕哂校?/p>

• 產(chǎn)品列表：一組可添加到購物車的商品。
• 購物車功能：用戶可以添加、更新和刪除購物車中的商品。
• 購物車總計：計算并顯示商品總數(shù)和總價。

我們將從設(shè)置上下文和減速器開始，然后構(gòu)建組件來展示功能。

設(shè)置和初始文件

首先，初始化您的 React 項目并設(shè)置基本文件夾結(jié)構(gòu)：

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

步驟一：創(chuàng)建初始狀態(tài)和Reducer

我們將從代表空購物車和一組示例產(chǎn)品的初始狀態(tài)開始。

初始狀態(tài)：

// 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
};

減速器功能：

我們將設(shè)置一個 cartReducer 函數(shù)來處理各種操作，例如添加商品、更新商品數(shù)量、刪除商品和計算總計。

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

解釋

• ADD_TO_CART：將商品添加到購物車，如果已存在則增加數(shù)量。
• REMOVE_FROM_CART：根據(jù) ID 刪除項目。
• UPDATE_QUANTITY：更新購物車中商品的數(shù)量。
• CALCULATE_TOTALS：計算購物車中的商品總數(shù)和總價。

---

第 2 步：創(chuàng)建上下文和提供者

現(xiàn)在，我們將創(chuàng)建一個上下文和提供者來全局傳遞我們的狀態(tài)和調(diào)度函數(shù)。這將允許所有組件訪問購物車狀態(tài)和操作。

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 步：構(gòu)建組件

設(shè)置了提供程序和上下文后，我們現(xiàn)在可以為 產(chǎn)品列表 和 購物車創(chuàng)建組件。

---

產(chǎn)品列表組件

ProductList 組件將顯示可用產(chǎn)品列表，并允許用戶將產(chǎn)品添加到購物車。

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;
  }
}

購物車組件

購物車組件顯示購物車中的商品，允許更新數(shù)量、刪除商品，并顯示商品總數(shù)和價格。

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：更新所選商品的數(shù)量。
• 商品總數(shù)和價格：購物車組件根據(jù)狀態(tài)中的計算值顯示商品總數(shù)和價格。

---

第 4 步：使用 Provider 包裝應(yīng)用程序

為了確保所有組件都可以訪問購物車狀態(tài)，請將整個應(yīng)用程序包裝在 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;

---

最后的處理：記憶和優(yōu)化

隨著應(yīng)用程序的增長，優(yōu)化性能至關(guān)重要。這里有一些提示：

1. Memoize Components：使用 React.memo 來防止依賴于狀態(tài)的組件不必要的重新渲染。
2. 單獨的上下文：如果產(chǎn)品和購物車上下文變得太大，請考慮將它們分開，以允許更有針對性的狀態(tài)更新。

回顧和結(jié)論

在本高級指南中，我們使用 useContext 和 useReducer 來管理全局購物車。主要要點包括：

1. 復(fù)雜的狀態(tài)管理：useReducer 簡化了管理復(fù)雜的操作和計算。
2. 使用 useContext 的全局狀態(tài)：使?fàn)顟B(tài)可以跨組件樹訪問。
3. 可擴(kuò)展模式：在上下文中分離狀態(tài)和操作可以實現(xiàn)更清晰、更模塊化的代碼。

嘗試將此方法應(yīng)用于您的項目，看看它如何提高應(yīng)用程序的可擴(kuò)展性和性能。快樂編碼！ ？

以上是React 中使用 useContext 和 useReducer 進(jìn)行狀態(tài)管理：構(gòu)建全局購物車的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！