React の useReducer Hook をマスターする: アクションを使用して複雑な状態を管理する

React で Reducer フックを使用する

useReducer フックは、機能コンポーネントでより複雑な状態ロジックを管理するために使用される組み込みの React フックです。これは、複数のサブ値を含む状態を処理する必要がある場合、または状態ロジックが複雑な場合に、useState フックの代替となります。 useState は単純な状態を管理するのに適していますが、useReducer は、特に状態遷移がアクションに依存している場合に、状態更新を処理するためのより構造化されたスケーラブルな方法を提供します。

---

useReducer とは何ですか?

useReducer フックは、次のような場合によく使用されます。

• 状態には、相互に依存する複数の値があります。
• 複雑な状態遷移があります。
• (Redux のように) アクションを明示的に処理する必要があります。

現在の状態とアクションを取得して新しい状態を返す リデューサー関数 を使用して機能します。このパターンは、Redux 状態管理ライブラリからインスピレーションを得ています。

---

useReducer の構文

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

• reducer: 現在の状態とアクションを受け取り、新しい状態を返す関数。
• initialState: リデューサーが動作する初期状態の値。
• state: リデューサーによって更新された現在の状態。
• dispatch: 状態の更新をトリガーするリデューサーにアクションを送信するために使用される関数。

---

useReducer の仕組み

1. Reducer 関数を作成します: Reducer 関数は、現在の状態とアクションという 2 つの引数を受け取ります。これらを使用して新しい状態を計算して返します。

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

1. 初期状態を定義します: initialState は、アクションがディスパッチされる前の状態の開始点です。

const initialState = { count: 0 };

1. コンポーネントで useReducer を使用します: これで、コンポーネント内で useReducer を使用して状態を処理できるようになります。フックから状態とディスパッチを取得します。

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

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

• 説明:
  • [増分] ボタンをクリックすると、「増分」タイプのアクションが送出されます。
  • リデューサー関数はこのアクションを受け取り、それに応じて状態を更新します。
  • ディスパッチは、リデューサーにアクションを送信することで状態の更新をトリガーするために使用されます。

---

useReducer を使用した完全な例:

useReducer を使用してカウンターを管理する方法を示す完全な例を次に示します。

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

• 説明:
  • useReducerはreducer関数とinitialStateで初期化されます。
  • ディスパッチは、アクション (インクリメント、デクリメント、またはリセット) をトリガーするために使用されます。
  • 各アクションの結果、アクション タイプに基づいて状態が更新されます。

---

useState ではなく useReducer を使用する場合

• 複雑な状態ロジック: 状態に複数のサブ値、または状態間の複雑な遷移が含まれる場合。

例: フィールドが個別に更新される必要があるが、相互に依存している複数のフィールドを持つフォームを管理します。

• 複数のアクションの方が良い: コンポーネントに、さまざまな方法で状態を変更するさまざまなアクション (例: インクリメント、デクリメント、リセット) がある場合。

• デバッグ: useReducer はより予測可能でテスト可能です。状態遷移は (アクションを通じて) 明示的に行われるため、変更の追跡とデバッグが容易になります。

• Redux にさらに類似: 後で Redux を使用する大規模なアプリを構築している場合、useReducer は同様のパターンを持っており、良い足がかりとなります。

---

パフォーマンスに関する考慮事項

• バッチ処理: React では、useReducer によってトリガーされた更新がバッチ処理されます。これは、複数のディスパッチ (たとえ急速に連続している場合でも) が 1 つのレンダリング サイクルで処理されることを意味し、パフォーマンスの向上に役立ちます。

• 過剰使用の回避: 状態ロジックが単純な場合 (単一のカウンターなど)、一般に useState を使用する方が簡単で、不必要な複雑さを回避できます。さらに構造が必要な場合は、useReducer を使用してください。

---

useState と useReducer の比較

機能 useState useReducer

Feature	useState	useReducer
Simplicity	Ideal for simple state with primitive values	Best for complex state or multiple actions
State Structure	Works well for single values or arrays/objects	Great for state objects with multiple sub-values
Action Handling	Doesn’t require actions; just updates state directly	Requires action objects to update state
Use Case	Small, independent pieces of state	Complex state transitions with many actions

シンプルさ プリミティブ値を含む単純な状態に最適 複雑な状態または複数のアクションに最適 状態構造 単一の値または配列/オブジェクトに適しています 複数のサブ値を持つ状態オブジェクトに最適 アクション処理 アクションは必要ありません。状態を直接更新するだけです アクション オブジェクトは状態を更新する必要があります 使用例 小規模で独立した国家 多くのアクションを伴う複雑な状態遷移 テーブル>

---

使用概要Reducer Hook

• useReducer は、React で複雑な状態ロジックを管理するために使用されます。
• useState と比較して状態遷移をより詳細に制御でき、状態がアクションに依存している場合、または構造化された方法で更新する必要がある場合に最適です。
• フックは配列、つまり現在の状態と、状態を更新するアクションをトリガーするディスパッチ関数を返します。
• 現在の状態とアクションを受け取り、新しい状態を計算して返す リデューサー関数 を使用します。

---

結論

useReducer フックは、React で複雑な状態ロジックを管理するのに強力です。これにより、状態の更新をより詳細に制御できるようになり、複数の値またはアクションに依存する状態遷移の処理が容易になります。コンポーネントに構造化された更新が必要な複雑な状態がある場合、または Redux から使用している場合は、useReducer が優れたソリューションです。

---

以上がReact の useReducer Hook をマスターする: アクションを使用して複雑な状態を管理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。