Tweet
Tweet

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

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

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

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