React での useContext と useReducer による状態管理: グローバルショッピングカートの構築-jsチュートリアル-php.cn

State Management with useContext and useReducer in React: Building a Global Shopping Cart

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

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

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

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

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

飛び込んでみましょう!

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

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

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

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

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

まず、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;

ログイン後にコピー