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
970
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
57
iOSのキーボード入力ビューをカスタマイズする
lemon
0
230
視え方と文字の大きさ
lemon
1
380
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
270
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
React.lazyとSuspenseで行うLazy Load
lemon
2
500
Other Decks in Programming
See All in Programming
Blueskyのプラグインを作ってみた
hakkadaikon
1
230
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
120
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
500
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
430
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
seike460
PRO
0
160
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
370
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
210
人には人それぞれのサービス層がある
shimabox
3
440
ビカム・ア・コパイロット
ymd65536
1
190
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
510
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
510
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
A better future with KSS
kneath
239
17k
Rails Girls Zürich Keynote
gr2m
94
13k
Designing for Performance
lara
608
69k
The World Runs on Bad Software
bkeepers
PRO
68
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
RailsConf 2023
tenderlove
30
1.1k
Designing for humans not robots
tammielis
253
25k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
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 まとめ
ご静聴ありがとうございました!