useReducer

状態遷移でやりたいことを実現する方法を検討すると、自然とreducerに行き着く

そのうえで、状態遷移が単純な場合に初めてuseState()で簡略化することを検討する

実際、useState()はuseReducerの簡単なwrapperとして実装されている

根拠を探そうとreactのコード読んでみようとしたが、import/exportのたらい回しが複雑すぎて断念した

代わりにPreactのコードを元に書くとこんな感じになる：

code:ts

const reducer = <State>(prev: State, value: State | ((prev: State) => State)) =>

typeof action === "function" ? value(prev) : value;

export const useState = <State>(initialState: State | (() => State)): [

State,

(value: State | ((prev: State) => State)) => void

] =>

typeof initialState === "function" ?

useReducer(reducer, null, initialState) :

useReducer(reducer, initialState);

Array.prototype.reduceにわたす函数のことをreducerと呼ぶ

実際、ReactのreducerもArray.prototype.reduceに渡せる

シンプルでうまい使い方

useState()とuseMemo()の組み合わせも、reducerに切り出せそうだ

わかりやすそうな例

useContext()でdispatchを下層に渡す

reducerをメタ函数にして、別のstateで更新されるようにする

code:ts

const reducer = (value) = (state, action) => { /*...*/ };

// ...

const state, setState = useState();

const data, dispatch = useReducer(reducer(flag ? state : state + 1));