React 中使用 useContext 和 useReducer 進(jìn)行進(jìn)階狀態(tài)管理：建立全域購物車

在上一篇文章中，我們介紹了結(jié)合 useContext 和 useReducer 在 React 應(yīng)用程式中有效管理全域狀態(tài)的概念。我們透過建立一個(gè)簡單的待辦事項(xiàng)清單來示範(fàn)這一點(diǎn)?，F(xiàn)在，我們將更進(jìn)一步，將這些概念應(yīng)用到一個(gè)更複雜的現(xiàn)實(shí)範(fàn)例中——全球購物車。

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

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

1. 使用 useReducer 處理較複雜的狀態(tài)。
2. 建立靈活的上下文提供者以全域管理狀態(tài)和操作。
3. 實(shí)現(xiàn)高階減速器函數(shù)來執(zhí)行計(jì)算並處理各種類型的操作。
4. 最佳化組件表現(xiàn)透過記憶來獲得更好的表現(xiàn)。

讓我們開始吧！

---

項(xiàng)目概要：全球購物車

我們的購物車應(yīng)用程式將具有：

• 產(chǎn)品清單：一組可加入購物車的商品。
• 購物車功能：使用者可以新增、更新和刪除購物車中的商品。
• 購物車總計(jì)：計(jì)算並顯示商品總數(shù)和總價(jià)。

我們將從設(shè)定上下文和減速器開始，然後建立組件來展示功能。

設(shè)定和初始文件

首先，初始化您的 React 專案並設(shè)定基本資料夾結(jié)構(gòu)：

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

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

我們將從代表空購物車和一組範(fàn)例產(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è)定一個(gè) cartReducer 函數(shù)來處理各種操作，例如新增商品、更新商品數(shù)量、刪除商品和計(jì)算總計(jì)。

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

解釋

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

---

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

現(xiàn)在，我們將建立一個(gè)上下文和提供者來全域傳遞我們的狀態(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)品清單 和 購物車建立元件。

---

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

---

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

為了確保所有組件都可以存取購物車狀態(tài)，請將整個(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īng)用程式的成長，優(yōu)化效能至關(guān)重要。這裡有一些提示：

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

回顧與結(jié)論

在本進(jìn)階指南中，我們使用 useContext 和 useReducer 來管理全域購物車。主要要點(diǎn)包括：

1. 複雜的狀態(tài)管理：useReducer 簡化了管理複雜的操作和計(jì)算。
2. 使用 useContext 的全域狀態(tài)：使?fàn)顟B(tài)可以跨組件樹存取。
3. 可擴(kuò)充模式：在上下文中分離狀態(tài)和操作可以實(shí)現(xiàn)更清晰、更模組化的程式碼。

嘗試將此方法應(yīng)用於您的項(xiàng)目，看看它如何提高應(yīng)用程式的可擴(kuò)展性和效能?？鞓肪幋a！ ？

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