React の &#useContext&# と &#useReducer&# のチュートリアル ガイド: グローバル状態の効率的な管理

React の useContext と useReducer の包括的なガイド: グローバル状態の効率的な管理

導入

React では、状態の管理は動的でインタラクティブなアプリケーションを構築するために重要です。 useState と useReducer はローカル コンポーネントの状態を処理するのに最適ですが、複数のコンポーネントにわたるグローバルな状態を管理する必要がある場合はどうなるでしょうか? useContext と useReducer を入力します。これら 2 つのフックを一緒に使用すると、グローバル レベルで状態管理を効率的に処理できます。

この記事では、useContext と useReducer を組み合わせて React アプリの堅牢な状態管理システムを作成する方法を検討します。両方のフックの基本を説明し、次に簡単なアプリケーションを構築して、グローバル状態を管理するためにこれらを組み合わせて使用​​する方法を説明します。

このガイドを終えるまでに、次の内容をしっかりと理解できるようになります。

1. useContext: コンポーネント間で状態を共有するためのフック。
2. useReducer: 複雑な状態ロジックを管理するためのフック。
3. useContext と useReducer の組み合わせ: スケーラブルなグローバル状態ソリューションのために両方のフックを一緒に使用する方法。

始めましょう!

---

useContext を理解する

useContextとは何ですか?

useContext は、すべてのレベルで手動で props を渡すことなく、コンポーネント ツリー全体で状態 (またはその他の値) を共有できるようにする React フックです。これは、グローバル データを多くのコンポーネントに一度に提供する必要がある場合に役立ちます。

useContext の構文は次のとおりです:

const value = useContext(MyContext);

ここで、MyContext は React.createContext() によって作成されたコンテキスト オブジェクトです。

useContext をいつ使用するか?

• グローバル状態または構成設定 (テーマ、認証など) を共有するため。
• 多くのレベルのネストされたコンポーネントに props を渡すのが面倒になる場合。

---

useReducer を理解する

useReducerとは何ですか?

useReducer は、複雑なロジックを含む状態、または状態が以前の状態に依存する場合に状態を管理するために使用される React フックです。これは、状態の更新がアクションに基づいている必要があり、複数の種類の状態変更がある場合に、useState の代替としてよく使用されます。

useReducer の構文は次のとおりです:

const value = useContext(MyContext);

• reducer: 現在の状態とアクションに基づいて新しい状態を返す関数。
• initialState: リデューサーの初期状態。
• dispatch: 状態を更新するためにリデューサーにアクションを送信するために使用される関数。

---

useContext と useReducer の組み合わせ

useContext と useReducer を組み合わせると、状態遷移のロジックを一元化しながら、アプリケーション全体で複雑な状態を共有できます。これは、アプリ内の任意のコンポーネントからアクセスできる必要があるグローバル状態を管理する場合に特に役立ちます。

なぜそれらを組み合わせるのか?

• 集中状態: useContext は状態のグローバル スコープを提供し、useReducer は複雑な状態の変更を管理するための構造化された方法を提供します。
• 予測可能な更新: useReducer を使用すると、アクションとリデューサーを使用して状態遷移を予測どおりに管理できます。一方、useContext を使用すると、状態がすべてのコンポーネントで利用できるようになります。
• スケーラビリティ: この組み合わせにより、多くのコンポーネントにわたる状態を管理する必要があるアプリケーションの拡張が容易になります。

---

プロジェクト例: グローバル To-Do リスト

useContext と useReducer を使用してグローバル状態を管理する、単純な To-Do リスト アプリケーションを作成してみましょう。このアプリはタスクの追加、切り替え、削除をサポートします。

ステップ 1: コンテキストとリデューサを作成する

グローバルな状態を保持するコンテキストとアクションを管理するリデューサーを作成することから始めます。

const [state, dispatch] = useReducer(reducer, initialState);

説明

• todoReducer: タスクの追加、切り替え、削除など、ToDo リストの状態を管理します。
• TodoContext: ToDo リストの状態のグローバル コンテキストを提供します。
• TodoProvider: これは、すべての子にコンテキストと useReducer フックを提供するラッパー コンポーネントです。

---

ステップ 2: ToDo リストコンポーネントを作成する

次に、ToDo リストを表示し、タスクの追加、削除、切り替え機能を提供するコンポーネントを作成します。

import React, { createContext, useContext, useReducer } from 'react';

// Initial State
const initialState = [];

// Reducer Function
function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'TOGGLE':
      return state.map(todo =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'REMOVE':
      return state.filter(todo => todo.id !== action.payload);
    default:
      return state;
  }
}

// Create Context
const TodoContext = createContext();

// Provide Context to App
export function TodoProvider({ children }) {
  const [state, dispatch] = useReducer(todoReducer, initialState);
  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
}

---

要約と結論

この記事では、useContext と useReducer を組み合わせて、React アプリケーションのグローバル状態を管理しました。私たちは次の場所を歩きました:

1. useContext: コンポーネントのツリー内でコンテキストを提供および消費するためのフック。
2. useReducer: 複雑な状態ロジックを予測可能かつ一元的な方法で管理するためのフック。
3. 2 つの組み合わせ: 両方のフックを一緒に使用して、タスクの追加、切り替え、削除のアクションを含む To Do リストを管理しました。

このパターンは拡張性が高く、アプリが複雑になるにつれて、useContext と useReducer は、クリーンで予測可能で効率的な状態管理ソリューションを維持するのに役立ちます。これらの概念を実験し、プロジェクトに適用して状態処理を改善してください。

コーディングを楽しんでください! ?

以上がReact の &#useContext&# と &#useReducer&# のチュートリアル ガイド: グローバル状態の効率的な管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。