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
900
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
120
視え方と文字の大きさ
lemon
1
330
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
230
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.7k
UI/UXデザイナーがデザインしてるもの
lemon
2
300
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.4k
React.lazyとSuspenseで行うLazy Load
lemon
2
410
なんとなくで書かないReact/ReduxのテストTips
lemon
0
320
Other Decks in Programming
See All in Programming
小さな開発会社を作った理由
polidog
0
1.9k
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
20240706_CDKConf
takuyay0ne
0
1.2k
How to use Macrobenchmark
veronikapj
0
160
英語
s_shimotori
1
220
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
CSC307 Lecture 13
javiergs
PRO
0
150
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
134
6.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Pragmatic Product Professional
lauravandoore
29
6.1k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Docker and Python
trallard
37
2.9k
The Language of Interfaces
destraynor
151
23k
Optimizing for Happiness
mojombo
373
69k
A designer walks into a library…
pauljervisheath
201
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Happy Clients
brianwarren
94
6.6k
Visualization
eitanlees
139
14k
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 まとめ
ご静聴ありがとうございました!