useDispatch

引数はない

dispatch関数を返す

このdispatch関数は引数にactionCreatorを指定して実行して使う

dispatch({ type: 'increment-counter' })

storeに紐付いたdispatchを取得

今までconnectを通したactionを使ってたけど、importしたactionCreatorをdispatchで挟んで使える

再描画の話

View側で作ったactionCreatorを子コンポーネントに渡す場合はuseCallbackしたほうがいい ref

不用意に子が再レンダリングされる可能性がある

code:ts

const dispatch = useDispatch()

const incrementCounter = useCallback(

() => dispatch({ type: 'increment-counter' }),

)

return (<Child incrementCounter={incrementCounter} />)

子の中でuseDispatch()を使うことも考えられるが、コンポーネント設計の話かmrsekut.icon