Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react-reduxで追加されたHooks APIの良い所と使い方
Search
camcam_lemon
August 01, 2019
Programming
5
920
react-reduxで追加されたHooks APIの良い所と使い方
Nihonbashi.js #5での登壇資料です。
camcam_lemon
August 01, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
要素のサイズを変えずに押しやすくする
lemon
0
20
iOSのキーボード入力ビューをカスタマイズする
lemon
0
150
視え方と文字の大きさ
lemon
1
350
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
240
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.7k
UI/UXデザイナーがデザインしてるもの
lemon
2
310
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
React.lazyとSuspenseで行うLazy Load
lemon
2
450
Other Decks in Programming
See All in Programming
Synchronizationを支える技術
s_shimotori
1
140
#pixiv小説画像メーカー はこうしてできた / The Making of the pixiv Novel Image Maker
roiban
0
240
Honoの来た道とこれから
yusukebe
19
3k
役立つログに取り組もう
irof
24
8k
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
The future of development – Are our jobs getting harder or easier?
hollycummins
1
250
PHP でアセンブリ言語のように書く技術
memory1994
PRO
0
110
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
4
2.9k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
4
300
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
100
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
180
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
15
3.8k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1365
200k
Agile that works and the tools we love
rasmusluckow
327
21k
A Tale of Four Properties
chriscoyier
156
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
The Cult of Friendly URLs
andyhume
78
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Code Review Best Practice
trishagee
64
17k
Code Reviewing Like a Champion
maltzj
519
39k
Designing Experiences People Love
moore
138
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
Transcript
react-reduxで追加されたHooks API の良い所と使い方 Nihonbashi.js #5
Name 甲斐田 亮一 Twitter @camcam_lemon Company 日本事務器株式会社 Skills TypeScript, React
/ Figma Occupation フロントエンドエンジニア/デザイナー
[email protected]
でついに 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 まとめ
ご静聴ありがとうございました!