Reducer
Reducerは、現在の状態と発生したイベントから次の状態を計算する純粋関数です。Reactでは、関連する複数の状態更新をイベント単位で集約したい場合にuseReducerを使います。
採用する場面
- 一つの画面状態を複数のイベントが更新する
- 一回の操作で複数の値を整合させる必要がある
- 更新規則をコンポーネントから分離し、独立してテストしたい
- 操作履歴をactionとして追えることに価値がある
独立した値が少数ならuseStateを使います。APIから取得したサーバーデータはReducerへ複製せず、query cacheなどのサーバー状態管理を正本にします。
実装方針
- actionは「値をどう変更するか」ではなく、「何が起きたか」を表す
- TypeScriptではDiscriminated Unionでactionを定義し、分岐を網羅する
- stateとactionを変更せず、新しいstateを返す
- 通信、時刻取得、ログ、ストレージ更新などの副作用はReducerの外で行う
- 導出できる値はstateへ重複保存せず、必要な時点で計算する
ReducerはProps Drillingを解消しません。状態更新を集約するのがReducer、深いツリーへ値を渡すのがContextです。Contextが必要になる前に、propsやchildrenで依存関係を明示できないか確認します。
ステートマシンとの関係
Reducerは状態更新の実装形式であり、ステートマシンは許可された状態と遷移のモデルです。業務上の不正遷移を防ぐ必要がある場合は、Reducerの中にもステートマシンの規則を明示します。