react-reduxで追加されたHooks APIの良い所と使い方

react-reduxで追加されたHooks API の良い所と使い方 Nihonbashi.js #5

Name 甲斐田亮一 Twitter @camcam_lemon Company 日本事務器株式会社 Skills TypeScript, React
/ Figma Occupation フロントエンドエンジニア/デザイナー

[email protected]でついに Hooks APIがstableなりました useStore 3 useDispatch 2 useSelector 1 ※useActionは削除されました

useSelector - mapStateToPropsと同等の役割 - メモライズ化させることが可能 - reselectと一緒に使うこともできる - ReduxのStoreにアクセスして値を取得する

連想配列やネストしたオブジェクトでなければ react-reduxのshallowEqualで比較可能 Hooksのdeps方式ではなく React.memo, shouldComponentUpdateと同じ方式 - メモライズ化は関数の第2引数で行う第2型引数は第1引数の関数が返却する型第1型引数はStoreの型 -
型付けは2つの型引数で行う

useDispatch - mapDispatchToPropsと同等の役割 - メモライズ化はuseCallbackで別途させる必要あり - Reduxにアクションを通知するdispatch関数を返す

depsにはdispatch関数も渡そう不要なレンダリングを避けるためには useCallbackによるメモライズ化が必須 - useCallbackとセットで使うことが多い - useDispatchはdispatchするための関数を返すだけ

useStore - Providerに渡しているstoreを取得する - あまり使うべきHooksではない¥ - reducerの再作成が必要な場面で使う

react-reduxのHooksで何が嬉しいのか - HoCからの完全脱却 - TypeScriptの型周りの煩わしさからの解放 - custom hooksのデメリットがなくなった - 圧倒的にconnectしやすい

custom hooksとは - コンポーネントの外に出されたhooksAPI を使っている関数 - custom hooks内の状態や副作用は分離してる複数回呼び出しても共有されることはない -
関数名は`use`で始めるのが原則

おもな用途再利用可能にする 3 ロジックの分離 2 一連の手続きをまとめる 1

デメリットって？

引数と型付け地獄引数と型付け地獄

アプリケーションに依存したcustom hooks は引数がやばくなる Context APIで回避はできるけども... Class Componentの方が自然に書ける

useSelectorとuseDispatchで書き直してみる

useSelectorとuseDispatchで書き直してみる直接書けるようになった直接書けるようになった

- custom hooksとの相性がとても良い - Container Componentの作成がしやすくなった - mapDispatchToProps => useDispatch
- mapStateToProps => useSelector まとめ

ご静聴ありがとうございました！

react-reduxで追加されたHooks APIの良い所と使い方

react-reduxで追加されたHooks APIの良い所と使い方

camcam_lemon

More Decks by camcam_lemon

Other Decks in Programming

Featured

Transcript