useReducer: React フック

React の useReducer: 2 つのミニプロジェクトで状態管理を簡素化する

導入

状態管理は、React で動的でインタラクティブなアプリケーションを構築する上で重要な部分です。 useState は単純な状態を管理するのに十分ですが、アプリケーションの状態が複雑になるにつれて、useReducer はそれを処理するためのより強力で予測可能な方法を提供します。 Redux のリデューサー パターンからインスピレーションを得た useReducer を使用すると、特定のアクションに応じて状態遷移がどのように発生するかを定義できるため、複数の複雑な状態更新があるシナリオに最適です。

この記事では次のことを行います:

1. useReducer、その構文、いつ使用するかについてわかりやすく説明します。
2. 2 つのミニプロジェクトを実装します。
   • 複数のアクションによるカウンター: 基本的なインクリメント/デクリメントを超えた例で、useReducer が複数のアクション タイプを処理する方法を示します。
   • 複雑な状態遷移を含む To-Do リスト: 複雑な状態オブジェクトを管理する useReducer の機能を強調する To-Do アプリ。

useReducer を使用して React の状態管理を簡素化する方法を詳しく見てみましょう!

---

useReducer を理解する

useReducerとは何ですか?

useReducer は、useState が不十分な状況向けに設計された React フックです。状態を直接更新する代わりに、現在の状態とアクションに基づいて次の状態を計算するリデューサー関数を指定します。この宣言的アプローチにより、状態遷移の予測可能性が維持され、より複雑な状態ロジックを集中管理できるようになります。

useReducer の構文

構文の内訳は次のとおりです。

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

• reducer: アクションに基づいて状態を更新する方法を定義する関数。 2 つの引数を取ります:

  • state: 現在の状態。
  • action: アクションに関する情報を含むオブジェクト。通常はタイプとオプションのペイロードが含まれます。

• initialState: 状態の開始値。

例: useReducer を使用した基本カウンター

useReducer を使用して単純なカウンターを作成し、実際の構文を確認してみましょう。

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

コードの説明

1. Reducer 関数: この関数はアクションの処理方法を定義します。アクションのタイプ (インクリメントまたはデクリメント) に基づいて、reducer 関数は新しい状態オブジェクトを返します。
2. アクションのディスパッチ: ディスパッチはアクションをリデューサーに送信し、リデューサーはそれを処理し、それに応じて状態を更新します。

---

useReducer を使用する場合

useReducer は、次の場合に特に役立ちます。

• 状態ロジックが複雑であるか、複数のサブ値が含まれています。
• 次の状態は前の状態に依存します。
• 複数のコンポーネントは、Reducer によって管理される状態にアクセスする必要があります (グローバル状態については useReducer と useContext を組み合わせることができます)。

---

ミニプロジェクト 1: 複数のアクションによるカウンター

このプロジェクトでは、useReducer がより広範なアクションのセットをどのように処理するかを確認するために、複数の操作 (インクリメント、デクリメント、リセット) を可能にする拡張カウンターを作成します。

ステップ 1: Reducer 関数を定義する

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

ステップ 2: カウンタコンポーネントを作成する

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

この強化されたカウンターは、インクリメントとデクリメントに加えて、リセット機能をサポートするようになりました。このプロジェクトは、状態更新のアクションを管理する useReducer の柔軟性を実証します。

---

ミニ プロジェクト 2: 複雑な状態遷移を含む To-Do リストの作成

ToDo リスト アプリは、useReducer がタスクの追加、削除、切り替えなど、複数の遷移を伴う複雑な状態オブジェクトの管理にいかに最適であるかを強調しています。

ステップ 1: レデューサを定義する

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
        default:
            throw new Error(`Unknown action: ${action.type}`);
    }
}

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

import React, { useReducer, useState } from 'react';

関数 ToDoList() {
    const [todos, ディスパッチ] = useReducer(todoReducer, []);
    const [タスク, setTask] = useState('');

    const handleAdd = () => {
        if (task.trim()) {
            dispatch({ タイプ: 'add'、ペイロード: タスク });
            setTask(''); // 入力フィールドをクリアします
        }
    };

    戻る （
        <div>
            <h2>To-Do リスト</h2>
            
            <button onClick={handleAdd}>タスクの追加</button>

            

{todos.map(todo => (

• ToDoリストコードの説明

  1. アクション:

     • 追加: 一意の ID と完了ステータスを false に設定して、新しいタスクをリストに追加します。
     • 削除: ID に基づいてタスクをフィルターして削除します。
     • 切り替え: 完了ステータスを切り替えることで、タスクを完了または未完了としてマークします。

  2. 動的データでの useReducer の使用: この例は、useReducer がオブジェクトの配列内の複雑なネストされた状態更新をどのように処理し、複数のプロパティを持つ項目の管理に最適なものにするかを示します。

  ---

  結論

  この記事では、React アプリケーションでより複雑な状態管理を行うために useReducer を効果的に使用する方法を学びました。私たちのプロジェクトを通じて:

  1. 拡張カウンターは、useReducer が複数のアクションベースの状態更新を簡素化する方法を示しました。
  2. To-Do リストでは、useReducer を使用してタスクの配列などの複雑な状態オブジェクトを管理する方法を示しました。

  useReducer を使用すると、堅牢な状態管理を必要とするアプリケーション向けに、よりクリーンで予測可能で保守しやすいコードを作成できます。これらのプロジェクトを試してみて、次回 React アプリで複雑な状態ロジックに遭遇したときは、Reducer の使用を検討してください!

以上がuseReducer: React フックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。