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
雰囲気でやってる人向けの Redux 再入門
Search
Yoshihide Jimbo
January 18, 2019
Technology
21
6.4k
雰囲気でやってる人向けの Redux 再入門
ng-kyoto Angular Meetup #9 での発表資料です。
https://ng-kyoto.connpass.com/event/113358/
Yoshihide Jimbo
January 18, 2019
Tweet
Share
More Decks by Yoshihide Jimbo
See All by Yoshihide Jimbo
高齢者でも使えるプロダクトUIの挑戦 / Designing User Interfaces for the Elderly
jmblog
32
27k
unstated-next による Redux に頼らない状態管理の考察
jmblog
9
5.1k
わかりやすいグラフを作ろう
jmblog
3
1.3k
Web Components で 社内 UI ライブラリを作っている話
jmblog
11
4.2k
gulp: The Good Parts
jmblog
29
5.9k
CSS in JS と CSS Modules
jmblog
25
4.6k
PostCSS とは何か
jmblog
38
9.7k
Kaizen Platform における UI ライブラリのワークフロー
jmblog
30
6.1k
フロントエンドエンジニアのための Dotfiles
jmblog
53
8.5k
Other Decks in Technology
See All in Technology
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
100
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
82k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
440
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
870
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
230
AIエージェント入門
minorun365
PRO
31
17k
JavaにおけるNull非許容性
skrb
2
2.6k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
560
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
230
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Speed Design
sergeychernyshev
27
810
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Transcript
雰囲気でやってる⼈向けの Redux 再⼊⾨ ng-kyoto Angular Meetup #9 | Jan 18,
2019
神保 嘉秀 @jmblog じんぼ よしひで
Redux(あるいは ngrx)使ってる⼈
store とか action とか reducer とか dispatch とか middleware とか
実はちゃんと把握してなくて、 雰囲気でコード書いてる⼈
それな
確かに Redux は覚えることが多い (ように⾒える)
ほんとうはすごくシンプルなライブラリ
Redux の概念が理解できていれば ngrx だって vuex だってすぐ理解できる。
Store 登場⼈物その1
そもそも、なぜ Redux を使うのか? アプリケーション全体の state 管理に秩序をもたらすため TUBUF
TUBUF 例えば、グローバル変数で state を管理することもできる
TUBUF ただし、アプリの複雑さが増すと、 state が「いつ」「なぜ」「どのように」 変わったのか把握できなくなり、 制御不能となる。
TUBUF 4UPSF そんな破綻を防ぐために、Store という「管理会社」を⽤意して、 そのなかで state を厳重に管理しましょうというのが Redux
Store の役割 • state を内部に保持する • state へアクセスするための⼿段を提供する • state
の更新を通知する⼿段を提供する • state を更新するための⼿段を提供する
Store の役割 • state を内部に保持する • state へアクセスするための⼿段を提供する • state
の更新を通知する⼿段を提供する • state を更新するための⼿段を提供する
store.getState() で最新の state を取得する
Store の役割 • state を内部に保持する • state へアクセスするための⼿段を提供する • state
の更新を通知する⼿段を提供する • state を更新するための⼿段を提供する
store.subscribe() で state 変更時に実⾏したい関数を登録する
Store の役割 • state を内部に保持する • state へアクセスするための⼿段を提供する • state
の更新を通知する⼿段を提供する • state を更新するための⼿段を提供する
この⼿続きがちょっと⾯倒くさい
Action 登場⼈物その2
TUBUF 4UPSF "DUJPO state を更新したいときの⼿続きとして、 Action という「依頼状」をStore に送らなければならない。
TUBUF 4UPSF "DUJPO Action は Store が⽤意した⼿段 = store.dispatch(action) を
使って送る。("dispatch" は「送る」という意味) TUPSFEJTQBUDI
"DUJPO Action の実態は、JavaScript の Plain Object。 type というプロパティを必ず持たせることが唯⼀の規約。
"DUJPO この type プロパティは Action Type と呼ばれる。 どういう state 更新をしてもらいたいかを
Store 側に伝えるための 「合⾔葉」みたいなもの。
"DUJPO また、Action を⽣成する関数は Action Creator と呼ばれる。
Action Type も Action Creator も Action に付随するサブキャラ。
では、依頼状(Action)を受け取った Store はどうするか?
Reducer 登場⼈物その3
TUBUF 4UPSF 3FEVDFS "DUJPO Store に届いた Action(依頼状)は、Store 内部にいる Reducer の元に届けられる。
TUBUF 4UPSF 3FEVDFS "DUJPO Reducer は受け取った依頼(Action)の中⾝を⾒て、 state を更新する。
4UPSF 3FEVDFS Reducer は Store の中で働くので、Store を作成する際に 引数で渡して、あらかじめ待機しておいてもらう。
4UPSF 3FEVDFS ⼀⼈の Reducer がすべての依頼をさばくこともできるが、 複数の Reducer に分担させることもできる。 その場合は combineReducers()
を使う。
Reducer の実態は、ただの関数。 「今の state」と「Action」を受け取り、「新しい state」を返す。 3FEVDFS
3FEVDFS 具体的には、Action の type プロパティ(Action Type)をみて、 それに応じた state の更新処理を immutable
に⾏う。 知らない type だったら今の state をそのまま返す。
ここまでのまとめ
TUBUF 4UPSF 3FEVDFS "DUJPO
Middleware 登場⼈物その4
TUBUF 4UPSF 3FEVDFS "DUJPO .JEEMFXBSF Middleware は、送られてきた Action を Reducer
の⼿前で捕まえて、 ゴニョゴニョすることができる。
例えば…
送られてきた Action の中⾝をログに出⼒したり、
特定の条件に該当する Action をもみ消したり、
Action に⾃前のプロパティルールを追加したり、
Action として、Plain Object だけではなく、 関数も送ることができるようにしたり(redux-thunk)、 (こういった、あとで実⾏してもらうために預ける関数のことを thunk といいます)
Action として、Plain Object だけではなく、 Promise も送ることができるようにしたり(redux-promise)、
特定の Action Type が来たら、スレッドのようなものを起動して、 そこで副作⽤のある処理を実⾏したり(redux-saga)、
という感じで、何でもできる
state を更新する流れのまとめ
TUBUF 4UPSF 3FEVDFS "DUJPO .JEEMFXBSF
シンプルでしょ?
おまけ
Repatch
TUBUF 4UPSF 3FEVDFS "DUJPO Redux(おさらい)
Redux がわずらわしい点 Action が存在するせいで、コードが冗⻑になる。 state の更新処理を1つ追加するだけで、 Reducer だけではなく、Action Type
も Action Creator も 増やさなければならない。 ⼀つ⼀つは単純なコードだが、だからこそ⾯倒くさい。
だったら、Action を捨てて、 Reducer を直接 dispatch しちゃばいいじゃない Repatch
TUBUF 4UPSF 3FEVDFS Repatch
Repatch
でも使っています
Angular だったらこういうのもあるらしい
MobX
state ⾃体が超賢いよ! TUBUF MobX
MobX の特徴 • state を observable にする • observer を⽤意すれば、state
の変更が⾃動的に伝わる • state は直接変更を加えてOK(immutable にしなくてよい)
MobX
state の更新は Redux より簡単にできるが、 その分、雑に使うこともできるので、 雰囲気で使うと怪我をしそう。 MobX
おわり "MMJDPOTBSFEFTJHOFECZ'SFFQJDGSPN'MBUJDPO