React学習ちまちま開始。
自分向けの備忘録。

Reducerとは

State更新に利用する関数のこと。
useReducerフックでは、Stateを初期化する際にStateをどのように更新するかの設定も行う。Stateの更新は必ずReducer経由でするのがルールで、これによって、Stateが意図せぬ方法で更新されることを防げる。

一番の基本形

import { useState, useReducer } from 'react';

const Example = () => {
 // useReducerの第一引数には更新のための関数、第二引数にstateの初期値
  const [rstate, dispatch] = useReducer((prev) => ++prev, 0);

  // Reducerは直接は呼び出せない、dispatch経由で呼び出す。
 // dispatch()を呼び出すことで、useReducerで設定した更新関数が実行される。
  const addr = () => {
    dispatch();
  };

  return (
    <>
      <div>
        <h3>{rstate}</h3>
        <button onClick={addr}>ADDR</button>
      </div>
    </>
  );
};

export default Example;

発展

import { useState, useReducer } from "react";

const Example = () => {
  // 初期化時に更新用関数も設定。
  // 引数として渡ってきたオブジェクト(Action)をもとにStateの更新を行う。
  // useReducerの更新関数内の第二引数にはDispatchで渡した引数が渡ってくるので、その内容を元に条件分岐する。
  const [rstate, dispatch] = useReducer((prev, { type, step }) => {
    switch (type) {
      case "+":
        return prev + step;
      case "-":
        return prev - step
      default:
        throw new Error("不明なactionです");
    }
  }, 0);

  // actionとして計算に必要なオプション(step)を渡したり
  const rcountUp = () => {
    dispatch({ type: "+", step: 2 });
  };
  const rcountDown = () => {
    dispatch({ type: "-", step: 2});
  };

  return (
    <>
      <div>
        <h3>{rstate}</h3>
        <button onClick={rcountUp}>+</button>
        <button onClick={rcountDown}>-</button>
      </div>
    </>
  );
};

export default Example;

Reducerはdispatch関数にActionを渡すことで実行する。
(ActionとはReducerに渡す指示書のようなもので一般的にはオブジェクトとして渡す)

useStateとuseReducerとの違い

useState

・状態の更新の仕方は利用側に任せる・・・思いもよらぬ更新の仕方でバグが起きやすくなる
・コンポーネント側で更新用の処理を保持
・特定の引数に特定の戻り値→純粋性を保ちにくいため、メンテナンスしづらい

useReducer

・状態の更新の仕方も状態側で担当する・・・更新の方法も定義してあるので、その方法に則って更新をすればバグが起きにくい
・Stateと一緒に更新用の処理を保持
・定義するReducer関数は、引数に完全に依存するため、純粋関数といえる→テストしやすい

【参考】
・Udemy:【2024年最新】React(v18)完全入門ガイド
・React実践入門

c.sakyou

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA