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
880
react-reduxで追加されたHooks APIの良い所と使い方
Nihonbashi.js #5での登壇資料です。
camcam_lemon
August 01, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
iOSのキーボード入力ビューをカスタマイズする
lemon
0
63
視え方と文字の大きさ
lemon
1
300
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
210
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.5k
UI/UXデザイナーがデザインしてるもの
lemon
2
300
ESLintで始めるTypeScriptの静的解析
lemon
8
1.9k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.4k
React.lazyとSuspenseで行うLazy Load
lemon
2
370
なんとなくで書かないReact/ReduxのテストTips
lemon
0
300
Other Decks in Programming
See All in Programming
Learning PHP and Static Analysis with PHP Parser
inouehi
1
250
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
8.1k
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
180
htmx is fun!
codehex
2
190
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
2.8k
OpenAPI を守るのは難しい
ohmori_yusuke
2
150
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
5
1.2k
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
174
21k
In The Pink: A Labor of Love
frogandcode
137
21k
Visualization
eitanlees
135
14k
Statistics for Hackers
jakevdp
789
220k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Designing the Hi-DPI Web
ddemaree
275
33k
Music & Morning Musume
bryan
39
5.5k
Clear Off the Table
cherdarchuk
82
310k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
The Cult of Friendly URLs
andyhume
73
5.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
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 まとめ
ご静聴ありがとうございました!