【React・hooks】useReducerの使い方を分かりやすく解説！

ReactのuseReducerとは
- useReducerの構文
useReducerを使用したコード例

ReactのuseReducerとは

useReducerはReact Hooksの一つであり、Reactアプリケーションの複雑なステートロジックを管理するのに使われます。

useStateと似てたりしますが、複雑なロジックに依存する複数のステートを追跡する場合、非常に役立つことでしょう。

また、React Hooksの一種であるuseContextと合わせて使うことで、Reduxの代わりとして活用することも可能です。

useReducerの構文

useReducerは以下のように2つの引数を受け取ります。

const [state, dispatch] = useReducer(reducer, 初期値)

reducer関数には、ステートを更新するロジックが含まれ、初期値にはシンプルな値を入れることができますが、一般的にはオブジェクトが入ります。

useReducer()の結果、返り値には現在のstateとdispatch関数が返ってきます。

dispatch関数とは、reducerの呼び出し関数です。

それでは、useReducerをコード例と共に見ていきましょう。

useReducerを使用したコード例

以下のコードでは、チェックボックスにチェックを入れ、タスクが完了した時のステート更新をuseReducerを用いて行っています。

import { useReducer } from "react";

const initialTodos = [
  {
    id: 1,
    title: "タスク1",
    complete: false,
  },
  {
    id: 2,
    title: "タスク2",
    complete: false,
  },
];

const taskReducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE_TASK":
      return state.map((task) => {
        if (task.id === action.id) {
          return { ...task, complete: !task.complete };
        } else {
          return task;
        }
      });
    case "DELETE_TASK":
      return state.filter((task) => task.id !== action.id)
    case "DELETE_ALL":
      return []
    default:
      return state;
  }
};

function Tasks() {
  const [tasks, dispatch] = useReducer(taskReducer, initialTodos);

  const handleComplete = (task) => {
    dispatch({ type: "COMPLETE", id: task.id });
  };

  return (
    <>
      {tasks.map((task) => (
        <div key={task.id}>
          <label>
            <input
              type="checkbox"
              checked={task.complete}
              onChange={() => handleComplete(task)}
            />
            {task.title}
          </label>
        </div>
      ))}
    </>
  );
}

このように、useReducerを使用することで、taskの状態変化に関する処理を一箇所にまとめることができます。

action.typeの結果で条件分岐しているため、完了（COMPLETE）以外の処理も同じreducerに書くことが可能で、呼び出し側（dispatchを使用する時）にて、オブジェクトのtypeプロパティ値を変えればOKです。