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

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

Transcript

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

   View Slide

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

   View Slide

3. react-redux@7.1.0でついに
   
   Hooks APIがstableなりました
   useStore
   3
   useDispatch
   2
   useSelector
   1
   ※useActionは削除されました
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. デメリットって？
    

    View Slide

14. View Slide

15. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide