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

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

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

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

camcam_lemon

August 01, 2019
Tweet

More Decks by camcam_lemon

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. [email protected]でついに

    Hooks APIがstableなりました
    useStore
    3
    useDispatch
    2
    useSelector
    1
    ※useActionは削除されました

    View full-size slide

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

    View full-size slide

  5. 連想配列やネストしたオブジェクトでなければ

    react-reduxのshallowEqualで比較可能
    Hooksのdeps方式ではなく

    React.memo, shouldComponentUpdateと同じ方式
    - メモライズ化は関数の第2引数で行う
    第2型引数は第1引数の関数が返却する型
    第1型引数はStoreの型
    - 型付けは2つの型引数で行う

    View full-size slide

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

    View full-size slide

  7. depsにはdispatch関数も渡そう
    不要なレンダリングを避けるためには

    useCallbackによるメモライズ化が必須
    - useCallbackとセットで使うことが多い
    - useDispatchはdispatchするための

    関数を返すだけ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    複数回呼び出しても共有されることはない
    - 関数名は`use`で始めるのが原則

    View full-size slide

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

    View full-size slide

  13. デメリットって?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. ご静聴ありがとうございました!

    View full-size slide