React の useContext と useReducer を使用した高度な狀態(tài)管理: グローバル ショッピング カートの構(gòu)築

前の記事では、React アプリケーションでグローバル狀態(tài)を効果的に管理するために useContext と useReducer を組み合わせる概念を紹介しました。シンプルな To-Do リストを作成することでこれを?qū)g証しました。ここで、さらに一歩進(jìn)んで、これらの概念をより複雑な現(xiàn)実世界の例であるグローバル ショッピング カートに適用します。

このガイドでは、アプリケーションのスケーラビリティとパフォーマンスを維持しながら、項目の追加、更新、削除、合計の計算など、複數(shù)の狀態(tài)とアクションを管理する方法について説明します。

この第 2 部では、次のことを?qū)Wびます:

1. useReducer を使用して、より複雑な狀態(tài)を処理します。
2. 柔軟なコンテキスト プロバイダーを作成して、狀態(tài)とアクションをグローバルに管理します。
3. 高度なリデューサー関數(shù)を?qū)g裝します。計算を?qū)g行し、さまざまなタイプのアクションを処理します。
4. メモ化を使用してコンポーネントのパフォーマンスを最適化し、パフォーマンスを向上させます。

飛び込んでみましょう!

---

プロジェクトの概要: グローバル ショッピング カート

ショッピング カート アプリケーションには以下が含まれます:

• 製品リスト: カートに追加できるアイテムのセット。
• カート機能: ユーザーはカート內(nèi)のアイテムを追加、更新、削除できます。
• カート合計: アイテムの合計と合計価格を計算して表示します。

まずコンテキストとリデューサーを設(shè)定してから、機能を紹介するコンポーネントを構(gòu)築します。

セットアップと初期ファイル

まず、React プロジェクトを初期化し、基本的なフォルダー構(gòu)造をセットアップします。

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

ステップ 1: 初期狀態(tài)とリデューサを作成する

空のカートとサンプル製品のセットを表す初期狀態(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ù):

アイテムの追加、アイテム數(shù)量の更新、アイテムの削除、合計の計算などのさまざまなアクションを処理するために、cartReducer 関數(shù)をセットアップします。

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

説明

• ADD_TO_CART: アイテムをカートに追加し、すでに存在する場合は數(shù)量を増やします。
• REMOVE_FROM_CART: ID に基づいてアイテムを削除します。
• UPDATE_QUANTITY: カート內(nèi)の商品の數(shù)量を更新します。
• CALCULATE_TOTALS: カートの合計アイテム數(shù)と合計価格を計算します。

---

ステップ 2: コンテキストとプロバイダーを作成する

次に、狀態(tài)を渡して関數(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è)定したら、製品リスト と カート のコンポーネントを作成できるようになりました。

---

ProductList コンポーネント

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

カートコンポーネント

カート コンポーネントは、カート內(nèi)のアイテムを表示し、數(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ù)量を更新します。
• 合計アイテムと価格: カート コンポーネントには、州で計算された値に基づいて合計アイテムと価格が表示されます。

---

ステップ 4: プロバイダーでアプリをラップする

すべてのコンポーネントがカートの狀態(tài)にアクセスできるようにするには、アプリ全體を 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;

---

最後の仕上げ: メモ化と最適化

アプリケーションが成長するにつれて、パフォーマンスの最適化が不可欠になります。ここにいくつかのヒントがあります:

1. コンポーネントのメモ化: React.memo を使用して、狀態(tài)に依存するコンポーネントの不必要な再レンダリングを防ぎます。
2. コンテキストの分離: 製品コンテキストとカート コンテキストが大きすぎる場合は、よりターゲットを絞った狀態(tài)更新を可能にするために分離することを検討してください。

要約と結(jié)論

この上級ガイドでは、useContext と useReducer を使用してグローバル ショッピング カートを管理しました。主な要點は次のとおりです:

1. 複雑な狀態(tài)管理: useReducer は、複雑なアクションと計算の管理を簡素化します。
2. useContext を使用したグローバル狀態(tài): コンポーネント ツリー全體で狀態(tài)にアクセスできるようにします。
3. スケーラブルなパターン: コンテキスト內(nèi)の狀態(tài)とアクションを分離することで、よりクリーンでモジュール化されたコードが可能になります。

このアプローチをプロジェクトに適用して、アプリケーションのスケーラビリティとパフォーマンスがどのように向上するかを確認(rèn)してください。コーディングを楽しんでください! ?

以上がReact での useContext と useReducer による狀態(tài)管理: グローバル ショッピング カートの構(gòu)築の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。