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

by camcam_lemon

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

デメリットって？

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

useSelectorとuseDispatchで書き直してみる

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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