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

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

A3ec73809a2105b3a9a829f983f6587e?s=47 camcam_lemon
August 01, 2019
Programming
5
830

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

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

A3ec73809a2105b3a9a829f983f6587e?s=128

camcam_lemon

August 01, 2019
Tweet

More Decks by camcam_lemon

See All by camcam_lemon
Yarn WorkSpaces × React Nativeの環境構築
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
80
フロントエンドにおけるアーキテクチャとの向き合い方
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
9
4k
UI/UXデザイナーがデザインしてるもの
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
2
290
ESLintで始めるTypeScriptの静的解析
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
8
1.5k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
6
1.1k
React.lazyとSuspenseで行うLazy Load
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
2
320
なんとなくで書かないReact/ReduxのテストTips
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
240
bundleサイズ2MBの社内サイト大改修譚.pdf
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
200
反復処理に速さを求めて
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
1
130

Other Decks in Programming

See All in Programming
FullStack eXchange, July 2022
6f3ec7315ad0715ae2a5f89a52877218?s=48 brucel
0
200
ちょっとつよい足トラ
6a661bb5871208cad64912223bb0c637?s=48 logilabo
0
400
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
3518f5ec9ebb241abc3569eb5cfc7d2a?s=48 1901drama
0
180
kintoneでランダム取得を作ってみた（imoniCamp 2022-07-27)
F9904a15202c8ead8e638fc6fa659e33?s=48 shokun1108
0
150
SAM × Dockerでサーバーレス開発が超捗った話
Cd029ecf0f2e807120fcf05161ce84b8?s=48 yu_yukk_y
1
370
Records の使い方はこれでいいの？
をみんなで考えたい / Java DO #20
8c6c1f0c4c41d0640ade76bd71e9e475?s=48 gishi_yama
0
120
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
Ae763d151aeee101b40ae10cc13ebe63?s=48 maroon1st
0
13k
Amazon Lookout for Visionで 筆跡鑑定してみた
B3cc0e7ba8e6c941f08a2e6f69d3e4c2?s=48 cmnakamurashogo
0
170
Automating Gradle benchmarks at N26
D4b7a3e2ed10f86e0b52498713ba2601?s=48 ubiratansoares
PRO
2
140
Better Angular Architectures: Architectures with Standalone Components @DWX2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
420
動画合成アーキテクチャを実装してみて
D5b3791309c8a03d37f05d238ded370d?s=48 satorunooshie
0
560
企業内スモールデータでのデータ解析
6aceb3377c71b05c1285459c596d1d1f?s=48 hamage9
0
890

Featured

See All Featured
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
7.7k
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
Designing the Hi-DPI Web
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
272
32k
Fontdeck: Realign not Redesign
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
7
1.1k
Building an army of robots
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
299
40k
Designing Dashboards & Data Visualisations in Web Apps
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
223
49k
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
84
4.8k
How to name files
0a4f62e90c976eeb44d33add75cca5af?s=48 jennybc
40
63k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
940
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k

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. ご静聴ありがとうございました！