投稿者: 
React学習ちまちま開始。
自分向けの備忘録。
Reducerとは
State更新に利用する関数のこと。
useReducerフックでは、Stateを初期化する際にStateをどのように更新するかの設定も行う。Stateの更新は必ずReducer経由でするのがルールで、これによって、Stateが意図せぬ方法で更新されることを防げる。
import { useState, useReducer } from "react";
const Example = () => {
const [state, setState] = useState(0);
// 初期化時に更新用関数も設定。
// 引数として渡ってきたオブジェクト（Action）をもとにStateの更新を行う。
const [rstate, dispatch] = useReducer((prev, { type }) => {
switch (type) {
case "+":
return ++prev;
case "-":
return --prev;
default:
throw new Error("不明なactionです");
}
}, 0);
const countUp = () => {
setState((prev) => ++prev);
};
const rcountUp = () => {
dispatch({ type: "+" });
};
const rcountDown = () => {
dispatch({ type: "-" });
};
return (
<>
<div>
<h3>{state}</h3>
<button onClick={countUp}>+</button>
</div>
<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