Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
react-reduxで追加されたHooks APIの良い所と使い方
camcam_lemon
August 01, 2019
Programming
5
830
react-reduxで追加されたHooks APIの良い所と使い方
Nihonbashi.js #5での登壇資料です。
camcam_lemon
August 01, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
80
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
9
4k
UI/UXデザイナーがデザインしてるもの
lemon
2
290
ESLintで始めるTypeScriptの静的解析
lemon
8
1.5k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.1k
React.lazyとSuspenseで行うLazy Load
lemon
2
320
なんとなくで書かないReact/ReduxのテストTips
lemon
0
240
bundleサイズ2MBの社内サイト大改修譚.pdf
lemon
0
200
反復処理に速さを求めて
lemon
1
130
Other Decks in Programming
See All in Programming
FullStack eXchange, July 2022
brucel
0
200
ちょっとつよい足トラ
logilabo
0
400
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
1901drama
0
180
kintoneでランダム取得を作ってみた(imoniCamp 2022-07-27)
shokun1108
0
150
SAM × Dockerでサーバーレス開発が超捗った話
yu_yukk_y
1
370
Records の使い方はこれでいいの? をみんなで考えたい / Java DO #20
gishi_yama
0
120
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
Amazon Lookout for Visionで 筆跡鑑定してみた
cmnakamurashogo
0
170
Automating Gradle benchmarks at N26
ubiratansoares
PRO
2
140
Better Angular Architectures: Architectures with Standalone Components @DWX2022
manfredsteyer
PRO
1
420
動画合成アーキテクチャを実装してみて
satorunooshie
0
560
企業内スモールデータでのデータ解析
hamage9
0
890
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Designing the Hi-DPI Web
ddemaree
272
32k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Building an army of robots
kneath
299
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
223
49k
Building Applications with DynamoDB
mza
84
4.8k
How to name files
jennybc
40
63k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
Navigating Team Friction
lara
175
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Transcript
react-reduxで追加されたHooks API の良い所と使い方 Nihonbashi.js #5
Name 甲斐田 亮一 Twitter @camcam_lemon Company 日本事務器株式会社 Skills TypeScript, React
/ Figma Occupation フロントエンドエンジニア/デザイナー
react-redux@7.1.0でついに Hooks APIがstableなりました useStore 3 useDispatch 2 useSelector 1 ※useActionは削除されました
useSelector - mapStateToPropsと同等の役割 - メモライズ化させることが可能 - reselectと一緒に使うこともできる - ReduxのStoreにアクセスして値を取得する
連想配列やネストしたオブジェクトでなければ react-reduxのshallowEqualで比較可能 Hooksのdeps方式ではなく React.memo, shouldComponentUpdateと同じ方式 - メモライズ化は関数の第2引数で行う 第2型引数は第1引数の関数が返却する型 第1型引数はStoreの型 -
型付けは2つの型引数で行う
useDispatch - mapDispatchToPropsと同等の役割 - メモライズ化はuseCallbackで別途させる必要あり - Reduxにアクションを通知するdispatch関数を返す
depsにはdispatch関数も渡そう 不要なレンダリングを避けるためには useCallbackによるメモライズ化が必須 - useCallbackとセットで使うことが多い - useDispatchはdispatchするための 関数を返すだけ
useStore - Providerに渡しているstoreを取得する - あまり使うべきHooksではない¥ - reducerの再作成が必要な場面で使う
react-reduxのHooksで何が嬉しいのか - HoCからの完全脱却 - TypeScriptの型周りの煩わしさからの解放 - custom hooksのデメリットがなくなった - 圧倒的にconnectしやすい
react-reduxのHooksで何が嬉しいのか - HoCからの完全脱却 - TypeScriptの型周りの煩わしさからの解放 - custom hooksのデメリットがなくなった - 圧倒的にconnectしやすい
custom hooksとは - コンポーネントの外に出されたhooksAPI を使っている関数 - custom hooks内の状態や副作用は分離してる 複数回呼び出しても共有されることはない -
関数名は`use`で始めるのが原則
おもな用途 再利用可能にする 3 ロジックの分離 2 一連の手続きをまとめる 1
デメリットって?
None
None
引数と型付け地獄 引数と型付け地獄
アプリケーションに依存したcustom hooks は引数がやばくなる Context APIで回避はできるけども... Class Componentの方が自然に書ける
useSelectorとuseDispatchで書き直してみる
useSelectorとuseDispatchで書き直してみる 直接書けるようになった 直接書けるようになった
- custom hooksとの相性がとても良い - Container Componentの作成がしやすくなった - mapDispatchToProps => useDispatch
- mapStateToProps => useSelector まとめ
ご静聴ありがとうございました!