投稿者: 
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