1. useReducerとは？

useReducerはReact Hooksの一つで、コンポーネント内での複雑な状態を管理するために利用されます。

類似した機能にuseStateが存在しますが、useStateがシンプルな状態管理に向いているのに対し、useReducerでは複数かつ複雑な状態を管理するのに向いています。

特徴	useState	useReducer
シンプルさ	単一の状態管理	複雑な状態管理
例	カウンターやトグルボタンオンオフ	フォーム入力やECサイトカートの管理

2. useReducerの基本構文

useReducerは、以下の構文で記述されます。

const [state, dispatch] = useReducer(reducer, initialArg)

• state: 現在の状態（useStateのstateと同じように、現在の値を保持します）。
• dispatch: ユーザーの操作やイベントが発生した際に呼び出す関数。action（実行したい操作の内容）を- reducerに渡します。
• reducer: stateを更新するための純粋関数。引数として現在のstateとactionを受け取り、新しいstateを返します。
• initialArg: stateの初期値。

※ 外部関数とは、ReactのHooksやコンポーネントのライフサイクルに依存せず、純粋に入力（引数）から出力（返り値）を決定する関数を指します。

例)　カウンターアプリ

現在のstate >> 「ユーザーがincrementボタン」 >> dispatch >> increment action, stateをreducerへ >> stateの更新

3. サンプルコード

ここではカウンターアプリをサンプルコードとして実装する。

• incrementボタン: 現在の値に+1して、「count up!」メッセージ表示
• decrementボタン: 現在の値に-1して、「count down」メッセージ表示
• Delete Messageボタン: メッセージのみ削除

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "increament":
      return { count: state.count + 1, message: "count up!" };
    case "decreament":
      return { count: state.count - 1, message: "count down" };
    case "deleteMessage":
      return { count: state.count, message: "" };
    default:
      throw new Error("Unknown action type");
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, { count: 0, message: "" });
  return (
    <div>
      <p>{state.count}</p>
      <p>{state.message}</p>
      <button onClick={() => dispatch({ type: "increament" })}>
        increament
      </button>
      <button onClick={() => dispatch({ type: "decreament" })}>
        decrement
      </button>
      <button onClick={() => dispatch({ type: "deleteMessage" })}>
        Delete Message
      </button>
    </div>
  );
}

[解説]

• 各ボタンをクリックするとdispatch関数にaction.typeが渡されます。
• その後、現在のstateとaction.typeがreducer関数に渡され、stateを更新します。

また、reducer関数内のdefaultは意図しないaction.typeが渡された際に発生するエラーです。

実際の画面については、以下のプレビュー参照

もしプレビューが表示されていない場合は以下の手順で表示

コマンドパレットを開く(mac: Shift+command+P, win: Shift+Ctl+P) > 「Open Preview」と入力 > 「CodeSandBox: Open Preview」を選択