ReactのuseReducerで複雑な状態更新を効率的に管理する方法

React開発において、状態管理はアプリケーションの中核を成す重要な部分です。シンプルな状態管理にはuseStateがよく使われますが、状態が複雑になると更新ロジックが煩雑になり、コードが読みにくくなることがあります。そんな中でuseReducerは、複雑な状態管理を効率的に行うための強力なツールです。本記事では、useReducerの基本構造から応用例までを詳しく解説し、複雑な状態更新をより簡潔かつ明確に実現する方法を学びます。

状態管理の基礎：useStateとuseReducerの違い

状態管理はReactでコンポーネントの動作を制御するための重要な仕組みです。ここでは、基本的なuseStateとより高度なuseReducerの違いを明確に解説します。

useStateの特徴

useStateは、単純な状態管理を行うためのReactのフックです。以下の特徴があります：

状態とその更新関数を提供します。
簡潔で、小規模な状態管理に適しています。
例：カウンター機能の実装。

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

useReducerの特徴

useReducerは、状態と更新ロジックを分離し、特に複雑な状態更新に適しています。

Reducer関数を使って状態遷移を管理します。
状態更新のロジックが明確になり、保守性が向上します。
例：複雑なカウンター機能。

const initialState = { count: 0 };

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

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

function increment() {
  dispatch({ type: 'increment' });
}

useStateとuseReducerの選択基準

useState
状態が単純で更新パターンが少ない場合に適しています。
useReducer
状態が複雑で、複数の更新パターンがある場合に効果を発揮します。
状態遷移を分離して整理する必要がある場合に便利です。

useStateとuseReducerを適切に選択することで、状態管理を効率的に行い、アプリケーションをスムーズに動作させることができます。

useReducerの基本構造と動作原理

useReducerは、状態更新のロジックをReducer関数に切り分け、状態管理を明確化するReactのフックです。その基本構造と動作原理を詳しく解説します。

useReducerの構文

useReducerは次のシンプルな構文で使用されます：

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

state: 現在の状態を保持する変数。
dispatch: 状態を更新するための関数。
reducer: 状態更新のロジックを定義した関数。
initialState: 初期状態。

Reducer関数の役割

Reducer関数は、現在の状態とアクションを受け取り、新しい状態を返します。
典型的な構造は以下の通りです：

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

state: 現在の状態オブジェクト。
action: 状態更新の命令を含むオブジェクト（通常、typeプロパティを持つ）。

useReducerの動作フロー

初期状態 (initialState) が設定されます。
コンポーネント内で dispatch を呼び出し、アクションを送信します。
Reducer関数が呼び出され、現在の状態とアクションに基づいて新しい状態を計算します。
新しい状態が state に設定され、コンポーネントが再レンダリングされます。

基本的な例

シンプルなカウンターの例を示します：

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

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

useReducerの利点

状態遷移が明確になり、コードが読みやすくなります。
複数のアクションに対応した複雑なロジックを管理できます。
大規模な状態管理を効率化します。

useReducerを活用することで、特に複雑な状態管理を簡潔かつ効果的に行うことが可能です。

複雑な状態更新の例：カウンターとフォーム入力

useReducerを使用すると、複数の状態を同時に管理し、それらの更新ロジックを統一的に処理できます。ここでは、カウンターとフォーム入力の状態をuseReducerで管理する例を示します。

複数の状態を管理するReducer関数

以下は、カウンターとフォーム入力を管理するReducer関数の例です：

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

increment: カウンターを増加させる。
decrement: カウンターを減少させる。
setInput: フォーム入力を更新する。

初期状態とuseReducerのセットアップ

Reducer関数と初期状態をuseReducerでセットアップします：

const initialState = { count: 0, input: '' };

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

初期状態では、countが0、inputが空文字列に設定されています。

UIの実装例

以下は、カウンターとフォーム入力のUIを含むコンポーネント例です：

import React, { useReducer } from 'react';

export default function CounterWithInput() {
  const initialState = { count: 0, input: '' };

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

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

  return (
    <div>
      <h1>Counter and Input</h1>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <div>
        <input
          type="text"
          value={state.input}
          onChange={(e) => dispatch({ type: 'setInput', payload: e.target.value })}
        />
        <p>Input: {state.input}</p>
      </div>
    </div>
  );
}

重要なポイント

状態の分離と統一: カウンターとフォーム入力の状態を一つのReducerで管理することで、ロジックが統一されます。
効率的な更新: アクションごとに状態更新を分けるため、状態管理が効率的になります。

useReducerを利用することで、複数の状態をスケーラブルに管理し、コードを簡潔に保つことができます。このアプローチは、小規模なアプリケーションから大規模なアプリケーションまで適用可能です。

useReducerのReducer関数の設計方法

Reducer関数はuseReducerの中心的な要素であり、適切な設計によってコードの可読性や保守性が向上します。ここでは、効果的なReducer関数を設計するためのポイントを解説します。

Reducer関数の基本構造

Reducer関数は、現在の状態 (state) とアクション (action) を引数として受け取り、新しい状態を返します。シンプルな構造を保つことが重要です。

function reducer(state, action) {
  switch (action.type) {
    case 'ACTION_TYPE':
      return { ...state, key: action.payload };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

設計のポイント

1. アクションの明確化

アクションタイプを定数として定義し、一貫性を保ちます。

const INCREMENT = 'increment';
const DECREMENT = 'decrement';
const SET_INPUT = 'setInput';

例：

function reducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    case DECREMENT:
      return { ...state, count: state.count - 1 };
    case SET_INPUT:
      return { ...state, input: action.payload };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

2. 状態変更を純粋関数として記述

Reducer関数は純粋関数であるべきです。以下を守りましょう：

引数に依存して結果を返す。
副作用（API呼び出し、DOM操作など）を含まない。

3. スイッチ文の整理

スイッチ文が長くなりすぎる場合は、アクションごとにサブ関数を定義します。

function handleIncrement(state) {
  return { ...state, count: state.count + 1 };
}

function handleDecrement(state) {
  return { ...state, count: state.count - 1 };
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return handleIncrement(state);
    case 'decrement':
      return handleDecrement(state);
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

4. 初期状態の明示

初期状態を独立した変数として定義し、Reducer関数が意図した通りに動作することを確認します。

const initialState = {
  count: 0,
  input: ''
};

5. 非同期処理の管理

Reducer関数自体には非同期処理を含めず、非同期ロジックは外部で処理し、アクションをDispatchする形式にします。

function fetchData(dispatch) {
  fetch('/api/data')
    .then((response) => response.json())
    .then((data) => {
      dispatch({ type: 'setData', payload: data });
    });
}

実践的なReducer関数の例

以下は、複数のアクションを含むReducerの実例です：

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

まとめ

Reducer関数は、状態更新ロジックを集約するため、保守性と可読性が求められます。純粋関数であること、明確なアクション設計、サブ関数による整理を行うことで、堅牢で効率的な状態管理を実現できます。

Context APIとuseReducerの組み合わせ

Reactで複数のコンポーネント間で状態を共有する必要がある場合、useReducerとContext APIを組み合わせることで効率的な状態管理が可能になります。ここでは、その組み合わせ方法を解説します。

Context APIとは

Context APIは、Reactでコンポーネントツリー全体にデータを渡すための仕組みです。従来のプロップス・ドリリング（深い階層にプロップスを渡す）を回避できます。

Context APIとuseReducerの連携のメリット

グローバルな状態管理: 複数のコンポーネントで共通の状態を利用可能。
コードの分離: 状態管理ロジックを1か所にまとめ、可読性を向上。
シンプルなAPI: Reduxなど外部ライブラリを使用せずに状態管理が実現。

実装ステップ

1. Contextの作成

Reducerと初期状態を準備し、Contextを作成します。

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

const initialState = { count: 0 };
const CountContext = createContext();

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

2. Context Providerコンポーネントの作成

useReducerを利用して状態管理を行い、Contextに渡します。

export function CountProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <CountContext.Provider value={{ state, dispatch }}>
      {children}
    </CountContext.Provider>
  );
}

3. コンシューマコンポーネントでContextを使用

useContextを使って、状態とdispatchを取得します。

import React, { useContext } from 'react';
import { CountContext } from './CountProvider';

export function Counter() {
  const { state, dispatch } = useContext(CountContext);

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

4. アプリ全体にProviderを適用

Providerをコンポーネントツリーのルートに配置します。

import React from 'react';
import ReactDOM from 'react-dom';
import { CountProvider } from './CountProvider';
import { Counter } from './Counter';

ReactDOM.render(
  <CountProvider>
    <Counter />
  </CountProvider>,
  document.getElementById('root')
);

注意点

パフォーマンス: Contextの値が更新されるたびに、すべてのコンシューマコンポーネントが再レンダリングされるため、必要に応じてReact.memoや分割Contextを使用して最適化します。
コードの整理: Reducer関数やContextの定義を別ファイルに分けることで、コードの見通しを良くします。

まとめ

Context APIとuseReducerの組み合わせは、小規模から中規模のアプリケーションで有効なグローバル状態管理の方法です。Reduxのような外部ライブラリを使わずに、Reactのネイティブ機能だけで効率的な状態管理を実現できます。この手法を活用すれば、よりスケーラブルなReactアプリケーションを構築できるでしょう。

useReducerのデバッグとトラブルシューティング

useReducerは強力なツールですが、複雑な状態管理を行う際には予期せぬエラーやバグが発生することがあります。ここでは、デバッグとトラブルシューティングの方法を解説します。

よくある問題と解決策

1. アクションタイプのタイポ

問題: アクションタイプにスペルミスがあると、Reducer関数で正しい処理が実行されません。
解決策:

アクションタイプを定数で管理します。

const INCREMENT = 'increment';
const DECREMENT = 'decrement';

function reducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

2. 未処理のアクション

問題: Reducer関数が未定義のアクションタイプを受け取ると、予期せぬ動作が発生します。
解決策:

defaultケースでエラーをスローします。

default:
  throw new Error(`Unhandled action type: ${action.type}`);

3. 不変性の破壊

問題: 状態を直接変更してしまうと、不変性が破壊され、予測不可能な動作を引き起こします。
解決策:

状態をスプレッド構文でコピーしてから変更します。

function reducer(state, action) {
  switch (action.type) {
    case 'update':
      return { ...state, value: action.payload }; // 状態をコピー
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

4. 初期状態の設定ミス

問題: useReducerに渡す初期状態が正しく設定されていない場合、アプリケーションが動作しません。
解決策:

初期状態を一つのオブジェクトとして明示的に定義します。

const initialState = { count: 0, input: '' };
const [state, dispatch] = useReducer(reducer, initialState);

5. 複数のアクションタイプの競合

問題: 複数のアクションタイプが同じ状態変更を試みる場合、意図した結果にならないことがあります。
解決策:

Reducer関数を整理し、アクションタイプごとに明確なロジックを定義します。

デバッグツールの活用

1. ログを活用する

Reducer関数内で、現在の状態とアクションをログに出力します。

function reducer(state, action) {
  console.log('Previous State:', state);
  console.log('Action:', action);
  switch (action.type) {
    // ...
  }
}

2. React Developer Tools

React DevToolsを使用して状態の変化をトラッキングします。
useReducerの状態はstateとして表示されます。

3. デバッガを使用

ブラウザの開発者ツールでdebuggerステートメントを挿入してReducer関数を検査します。

function reducer(state, action) {
  debugger; // 開発者ツールで確認
  switch (action.type) {
    // ...
  }
}

複雑な状態のデバッグ

複雑な状態を扱う場合、以下の戦略を取ります：

状態を分割: 状態が肥大化している場合、関連する状態を別々のReducerで管理します。
テストを作成: Reducer関数の単体テストを作成し、各アクションに対する期待される動作を確認します。

test('increment action increments the count', () => {
  const initialState = { count: 0 };
  const action = { type: 'increment' };
  const newState = reducer(initialState, action);
  expect(newState).toEqual({ count: 1 });
});

まとめ

useReducerのデバッグでは、ログ、React DevTools、テストを活用し、状態管理ロジックを整理することが重要です。これにより、エラーの特定と修正が効率化され、堅牢なアプリケーションを構築できます。

状態管理ライブラリとの比較：Redux vs useReducer

useReducerとReduxはどちらもReactアプリケーションの状態管理に利用されますが、その用途や特徴には違いがあります。ここでは、両者を比較し、useReducerの適切な適用場面を明確にします。

useReducerの特徴

useReducerはReactのネイティブな状態管理フックで、コンポーネント単位や小規模な状態管理に適しています。以下が主な特徴です：

組み込み機能: 外部ライブラリを必要としない。
シンプルな構造: Reducer関数とdispatchによる直感的な操作。
ローカルなスコープ: 状態がコンポーネント内で管理されるため、スコープが明確。

Reduxの特徴

Reduxはグローバルな状態管理のためのライブラリで、大規模なアプリケーションにおける状態の一元管理に向いています。以下が主な特徴です：

グローバルな状態管理: アプリケーション全体で共有可能な状態を一元管理。
強力なツールチェーン: Redux DevToolsなどのデバッグツールが充実。
中間処理のサポート: Middleware（例: Redux ThunkやRedux Saga）を使用して非同期処理やロジックを管理。

useReducerとReduxの比較

項目	useReducer	Redux
適用範囲	ローカル状態や小規模な状態管理	グローバル状態や大規模な状態管理
セットアップの容易さ	React組み込みでセットアップ不要	ReduxストアやMiddlewareの設定が必要
デバッグ	React DevToolsを使用	Redux DevToolsなど強力なデバッグツールが利用可能
スケーラビリティ	状態が増えると管理が複雑化する	一元管理のため、複雑な状態も管理可能
学習コスト	低い	高い
非同期処理	カスタムロジックが必要	Redux Thunk/Sagaなどで簡単に対応可能

適用場面の選択基準

useReducerを選ぶべき場面

状態がコンポーネントローカルに限定される場合。
小規模または中規模のアプリケーション。
状態管理を簡潔に行いたい場合。

Reduxを選ぶべき場面

複数のコンポーネント間でグローバルな状態を共有する必要がある場合。
状態のスケーラビリティが求められる場合。
非同期処理や複雑なビジネスロジックを扱う場合。

実践例

useReducerの例

ローカルな状態管理の例を示します：

const initialState = { count: 0 };

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

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

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

Reduxの例

グローバルな状態管理の例を示します：

// Redux Slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count += 1; },
    decrement: (state) => { state.count -= 1; },
  },
});

export const { increment, decrement } = counterSlice.actions;

const store = configureStore({ reducer: { counter: counterSlice.reducer } });

// React Component
function Counter() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <p>Count: {count}</p>
    </div>
  );
}

まとめ

useReducerはシンプルな構造で状態管理を行える一方、Reduxはスケーラブルで強力なグローバル状態管理を提供します。アプリケーションの規模や状態の複雑性に応じて、適切なツールを選択することが重要です。

応用例：Todoアプリの状態管理をuseReducerで実装

useReducerを活用して、Todoアプリの状態管理を実装する具体例を紹介します。このアプリでは、タスクの追加、削除、完了状態の切り替えなど、複数の操作を効率的に管理します。

初期状態とReducer関数の設計

まず、アプリの初期状態とReducer関数を定義します。

const initialState = {
  todos: [],
};

function reducer(state, action) {
  switch (action.type) {
    case 'addTodo':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.payload, completed: false }],
      };
    case 'toggleTodo':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'deleteTodo':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

addTodo: 新しいタスクを追加します。
toggleTodo: 指定したタスクの完了状態を切り替えます。
deleteTodo: 指定したタスクを削除します。

Todoアプリのコンポーネント

以下のコードで、Todoアプリを実装します：

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

export default function TodoApp() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const [input, setInput] = useState('');

  function handleAddTodo() {
    if (input.trim()) {
      dispatch({ type: 'addTodo', payload: input });
      setInput('');
    }
  }

  return (
    <div>
      <h1>Todo App</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Enter a task"
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {state.todos.map((todo) => (
          <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
            <button onClick={() => dispatch({ type: 'toggleTodo', payload: todo.id })}>
              {todo.completed ? 'Undo' : 'Complete'}
            </button>
            <button onClick={() => dispatch({ type: 'deleteTodo', payload: todo.id })}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

重要なポイント

状態の初期化
初期状態はtodosという空の配列です。
入力フォームの管理
ユーザーがタスクを入力できるよう、useStateでフォーム入力の状態を管理します。
アクションのDispatch
ボタン操作に応じて適切なアクションをdispatchします。

機能の追加例

1. タスクの編集機能

Reducerに編集アクションを追加します。

case 'editTodo':
  return {
    ...state,
    todos: state.todos.map((todo) =>
      todo.id === action.payload.id ? { ...todo, text: action.payload.text } : todo
    ),
  };

対応するDispatchを実装することで、タスクの編集機能が追加できます。

2. 全タスクの一括削除

全タスクを削除するアクションを追加します。

case 'clearTodos':
  return {
    ...state,
    todos: [],
  };

最終的な完成形

以下が完成したTodoアプリのUIの例です：

タスクの追加：入力フォームと「Add Todo」ボタン。
タスクの削除：各タスクに削除ボタン。
完了状態の切り替え：各タスクに完了/元に戻すボタン。
状態管理：useReducerによる一元管理。

まとめ

useReducerを使用することで、状態管理を効率化し、タスク管理のような複雑なロジックを簡潔に実装できます。このアプローチを活用すれば、よりスケーラブルで保守性の高いReactアプリケーションを構築できるでしょう。

まとめ

本記事では、ReactのuseReducerを活用して複雑な状態管理を効率的に行う方法を解説しました。useReducerは、小規模なコンポーネントから中規模アプリケーションまで対応できるシンプルかつ強力なツールです。その基本構造、Context APIとの組み合わせ、デバッグのコツ、Reduxとの比較、そして具体的なTodoアプリの応用例を通じて、useReducerの実用的な側面を理解できたと思います。正しい設計と活用方法を学び、より保守性の高いReactアプリケーションを構築しましょう。

ReactのuseReducerで複雑な状態更新を効率的に管理する方法

状態管理の基礎：useStateとuseReducerの違い

useStateの特徴

useReducerの特徴

useStateとuseReducerの選択基準

useReducerの基本構造と動作原理

useReducerの構文

Reducer関数の役割

useReducerの動作フロー

基本的な例

useReducerの利点

複雑な状態更新の例：カウンターとフォーム入力

複数の状態を管理するReducer関数

初期状態とuseReducerのセットアップ

UIの実装例

重要なポイント

useReducerのReducer関数の設計方法

Reducer関数の基本構造

設計のポイント

1. アクションの明確化

2. 状態変更を純粋関数として記述

3. スイッチ文の整理

4. 初期状態の明示

5. 非同期処理の管理

実践的なReducer関数の例

まとめ

Context APIとuseReducerの組み合わせ

Context APIとは

Context APIとuseReducerの連携のメリット

実装ステップ

1. Contextの作成

2. Context Providerコンポーネントの作成

3. コンシューマコンポーネントでContextを使用

4. アプリ全体にProviderを適用

注意点

まとめ

useReducerのデバッグとトラブルシューティング

よくある問題と解決策

1. アクションタイプのタイポ

2. 未処理のアクション

3. 不変性の破壊

4. 初期状態の設定ミス

5. 複数のアクションタイプの競合

デバッグツールの活用

1. ログを活用する

2. React Developer Tools

3. デバッガを使用

複雑な状態のデバッグ

まとめ

状態管理ライブラリとの比較：Redux vs useReducer

useReducerの特徴

Reduxの特徴

useReducerとReduxの比較

適用場面の選択基準

useReducerを選ぶべき場面

Reduxを選ぶべき場面

実践例

useReducerの例

Reduxの例

まとめ

応用例：Todoアプリの状態管理をuseReducerで実装

初期状態とReducer関数の設計

Todoアプリのコンポーネント

重要なポイント

機能の追加例

1. タスクの編集機能

2. 全タスクの一括削除

最終的な完成形

まとめ

まとめ

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル