Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Nihonbashi.js #5での登壇資料です。

A3ec73809a2105b3a9a829f983f6587e?s=128

camcam_lemon

August 01, 2019
Tweet

Transcript

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

  2. Name 甲斐田 亮一 Twitter @camcam_lemon Company 日本事務器株式会社 Skills TypeScript, React

    / Figma Occupation フロントエンドエンジニア/デザイナー
  3. react-redux@7.1.0でついに Hooks APIがstableなりました useStore 3 useDispatch 2 useSelector 1 ※useActionは削除されました

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

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

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

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

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

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

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

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

    関数名は`use`で始めるのが原則
  12. おもな用途 再利用可能にする 3 ロジックの分離 2 一連の手続きをまとめる 1

  13. デメリットって?

  14. None
  15. None
  16. 引数と型付け地獄 引数と型付け地獄

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

  18. useSelectorとuseDispatchで書き直してみる

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

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

    - mapStateToProps => useSelector まとめ
  21. ご静聴ありがとうございました!