Posted in React

[React] useReducer

   Published Date: 2024年2月9日

useReducerはReactのHookのひとつで、useStateに比べてより複雑なコンポーネントの状態管理を可能にします。簡単な利用例は「＋」「－」「リセット」ボタンがあり、数字の加算・減算・リセットを管理するようなときになります。

useReducerとuseStateの違い

useReduceruseState
定義式
const [state, dispatch] = useReducer(reducer, initialState);		const [state, setState] = useState(initialState);
実装関数の定義時に更新の方法を決める。値の変更をしたいときに更新の方法を決める。
利用ケース複数の状態・複雑なロジック管理シンプルな状態管理

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

  • 左辺のstateは現在の状態
  • 左辺のdispachはreducerを実行するための関数
  • 右辺のreduerはstateを更新すための関数。state とactionを受け取り、新しいsteteを返す
  • 右辺のinitialStateはstateの初期値をセット
  • 右辺には省略可能な第三引数 init もある。これは初期stateを返す。指定されていない場合はinitialSateになる。

useReducerを使ったカウンターの実装例

下記のような簡単なカウンターを作ってみます。加算・減算・5ずつ加算・クリアの４つのボタンを作り、ボタンを押すと上のカウントの表示が変化します。

import { useReducer } from "react";

const reducer = (prev, { type, plusNum }) => {
  switch (type) {
    case "plus":
      return ++prev;
    case "minus":
      return --prev;
    case "addNum":
      return prev + plusNum;
    case "clear":
      return 0;
    default:
      throw new Error("actionを正しく設定してください。");
  }
};

const Sample = () => {
  const [state, dispatch] = useReducer(reducer, 0);
  const countUp = () => {
    dispatch({ type: "plus" });
  };
  const countDown = () => {
    dispatch({ type: "minus" });
  };
  const countPlusNum = () => {
    dispatch({ type: "addNum", plusNum: 5 });
  };
  const countClear = () => {
    dispatch({ type: "clear" });
  };
  return (
    <>
      <p>カウント: {state}</p>
      <button onClick={countUp}>+</button>
      <button onClick={countDown}>-</button>
      <button onClick={countPlusNum}>+5</button>
      <button onClick={countClear}>クリア</button>
    </>
  );
};

export default Sample;

const reducer = (prev, { type, plusNum }) => {} の形でreducerの中身を記述します。

第一引数「prev」は前の値

第二引数は「dispachタイプ, 任意のプロパティ」になっています。今回は任意のプロパティは加算する数が入っています。1を加算・減算するのはprev+1やprev-1で計算し、2以上の数を加算するときはplusNumに数字を設定しています。

　reducerでは「現在の値（前の値）」「dispatchタイプ」「任意のプロパティ（値）」を受け取りcase文で処理して値を返します。

処理のまとめ

  • １．発火点を作る（今回はボタンのonClick）
  • ２．発火点に対応する関数を作る dispatch{(type : ” “)} を実行。
  • ３．reducer関数で前の値を変更する処理を実行
  • ４．stateが新しい値に更新される


Author: webmaster