【React Hooks】useReducerの使い方を解説！useStateとの違いは？

2024-07-14

当サイトでは一部リンクに広告が含まれています

ReactのuseReducerというHookをご存知でしょうか？
これは、Reactの関数コンポーネントで状態管理を行うための強力なツールです。

この記事では、useReducerの基本的な使い方から、そのメリット、そしてuseStateとの違いまで、初心者でも理解できるように解説します。

React Hooksとは？

まずは、useReducerが何であるかを理解する前に、それが属するReact Hooksについて説明します。

React Hooksは、React 16.8から導入された新機能で、関数コンポーネントで状態やライフサイクルなどを扱うことができるようになりました。
これにより、クラスコンポーネントでしかできなかった一部の機能を、関数コンポーネントでも使用できるようになりました。

useReducerは、その中の一つで、複雑な状態管理を行うためのHookです。

ReactのuseReducerとは？

useReducerは、Reactの関数コンポーネントで複雑な状態管理を行うためのHookです。

useReducerは、現在の状態とアクションを引数に取り、新しい状態を返す関数（これを「リデューサ」と呼びます）と、初期状態を引数に取ります。

リデューサとは、Reduxなどの状態管理ライブラリでよく使われる概念で、状態の更新方法を定義した関数のことを指します。

アクションは、何らかのユーザー操作（ボタンのクリック、フォームの送信など）によって発生するイベントのことで、通常はオブジェクトで表され、何をするべきかを示すtypeプロパティを持ちます。

「リデューサ」をもっと詳しく！

「リデューサ」はなかなかイメージが付きにくいと思うので、もう少し詳しく説明します。

「リデューサ」は、プログラミングの世界でよく使われる概念で、特に状態管理の文脈でよく出てきます。
リデューサは、現在の状態とアクションを引数に取り、新しい状態を返す関数のことを指します。

それでは、もう少し具体的に見てみましょう。

例えば、あなたがゲームのキャラクターを操作しているとします。
このキャラクターの「状態」は、位置や体力、装備などの情報を含んでいます。
そして、あなたがゲーム内で行う操作（前に進む、後ろに戻る、ジャンプする、攻撃するなど）は「アクション」です。

リデューサは、このキャラクターの現在の状態とあなたが行ったアクションを引数に取ります。
そして、そのアクションに基づいてキャラクターの新しい状態を計算し、それを返します。

たとえば、キャラクターが前に進むアクションを行った場合、リデューサはキャラクターの位置情報を更新して新しい状態を作ります。
また、キャラクターが攻撃を受けた場合、リデューサはキャラクターの体力を減らして新しい状態を作ります。

このように、リデューサはアプリケーションの状態を管理するための中心的な役割を果たします。
そして、ReactのuseReducerフックは、このリデューサの概念を利用して、Reactアプリケーションの状態管理を助けます。

useReducerの基本的な使い方

それでは、具体的なコードを見てみましょう。

import React, { useReducer } from 'react';

const initialState = 0;

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

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>増加</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>減少</button>
    </div>
  );
}

上記の例では、useReducerを使用してカウンターアプリケーションを作成しています。

まず、初期状態として0を設定しています。
次に、リデューサ関数を定義しています。この関数は、現在の状態とアクションを引数に取り、新しい状態を返します。

そして、useReducerを呼び出して、現在の状態（この場合はcount）と、アクションをディスパッチするための関数（この場合はdispatch）を取得しています。

最後に、ボタンのクリックイベントに対して、dispatch関数を呼び出すことで、状態を更新しています。

useReducerのメリット

useReducerの最大のメリットは、複雑な状態管理を行う際の可読性とテストの容易さです。

状態更新ロジックが一箇所にまとまっているため、コードの流れを追いやすく、バグの発見も容易になります。

また、リデューサは純粋な関数であるため、テストも容易です。同じ入力に対して必ず同じ出力を返すため、特定のアクションが発生したときの新しい状態を確認するテストを書くことができます。

useStateとの違いは？

それでは、useStateとuseReducerの違いについて見てみましょう。

まず、useStateを使用したカウンターアプリケーションの例を見てみましょう。

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount

(count - 1);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>増加</button>
      <button onClick={decrement}>減少</button>
    </div>
  );
}

上記の例では、useStateを使用してカウンターの状態を管理しています。increment関数とdecrement関数を使用して、カウンターの状態を増減させています。

次に、先ほどのuseReducerを使用したカウンターアプリケーションの例を再度見てみましょう。

import React, { useReducer } from 'react';

const initialState = 0;

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

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>増加</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>減少</button>
    </div>
  );
}

これらの例からわかるように、useStateとuseReducerは同じ機能を提供しますが、それぞれ異なるユースケースに適しています。

useStateは単純な状態管理に適していますが、useReducerは複雑な状態管理や、状態更新ロジックをコンポーネントの外部に分離したい場合に適しています。