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
980
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
65
iOSのキーボード入力ビューをカスタマイズする
lemon
0
240
視え方と文字の大きさ
lemon
1
390
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
280
フロントエンドにおけるアーキテクチャとの向き合い方
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
510
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
210
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
52
33k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
710
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
450
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
350
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
How GitHub (no longer) Works
holman
314
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building an army of robots
kneath
306
45k
Rails Girls Zürich Keynote
gr2m
94
14k
A Modern Web Designer's Workflow
chriscoyier
694
190k
The Invisible Side of Design
smashingmag
301
51k
A designer walks into a library…
pauljervisheath
207
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
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 まとめ
ご静聴ありがとうございました!