React での useContext と useReducer による状態管理: グローバル ショッピング カートの構築

React の useContext と useReducer を使用した高度な状態管理: グローバル ショッピング カートの構築

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

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

この第 2 部では、次のことを学びます:

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

飛び込んでみましょう!

---

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

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

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

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

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

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

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

ステップ 1: 初期状態とリデューサを作成する

空のカートとサンプル製品のセットを表す初期状態から始めます。

初期状態:

// 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 コンポーネントは利用可能な製品のリストを表示し、ユーザーが製品をカートに追加できるようにします。

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: プロバイダーでアプリをラップする

すべてのコンポーネントがカートの状態にアクセスできるようにするには、アプリ全体を 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 を使用して、状態に依存するコンポーネントの不必要な再レンダリングを防ぎます。
2. コンテキストの分離: 製品コンテキストとカート コンテキストが大きすぎる場合は、よりターゲットを絞った状態更新を可能にするために分離することを検討してください。

要約と結論

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

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

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

以上がReact での useContext と useReducer による状態管理: グローバル ショッピング カートの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。