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

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

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

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

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

讓我們開(kāi)始吧！

---

項(xiàng)目概述：全球購(gòu)物車(chē)

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

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

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

設(shè)置和初始文件

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

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

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

我們將從代表空購(gòu)物車(chē)和一組示例產(chǎn)品的初始狀態(tài)開(kā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è)置一個(gè) cartReducer 函數(shù)來(lái)處理各種操作，例如添加商品、更新商品數(shù)量、刪除商品和計(jì)算總計(jì)。

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

解釋

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

---

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

現(xiàn)在，我們將創(chuàng)建一個(gè)上下文和提供者來(lái)全局傳遞我們的狀態(tài)和調(diào)度函數(shù)。這將允許所有組件訪問(wèn)購(gòu)物車(chē)狀態(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)品列表 和 購(gòu)物車(chē)創(chuàng)建組件。

---

產(chǎn)品列表組件

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

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

購(gòu)物車(chē)組件

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

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

---

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

為了確保所有組件都可以訪問(wèn)購(gòu)物車(chē)狀態(tài)，請(qǐng)將整個(gè)應(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)用程序的增長(zhǎng)，優(yōu)化性能至關(guān)重要。這里有一些提示：

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

回顧和結(jié)論

在本高級(jí)指南中，我們使用 useContext 和 useReducer 來(lái)管理全局購(gòu)物車(chē)。主要要點(diǎn)包括：

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

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

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