Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
雰囲気でやってる人向けの Redux 再入門
Yoshihide Jimbo
January 18, 2019
Technology
19
4.7k
雰囲気でやってる人向けの 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
jmblog
29
19k
jmblog
8
3.8k
jmblog
3
520
jmblog
10
2.6k
jmblog
29
4.8k
jmblog
25
3.8k
jmblog
39
8.1k
jmblog
31
5.5k
jmblog
53
7.8k
Other Decks in Technology
See All in Technology
nkjzm
1
850
kanaugust
PRO
0
240
yasuakiomokawa
0
370
ocise
0
160
shirayanagiryuji
0
2.2k
hhiroshell
7
460
recruitengineers
0
110
ocise
1
1.3k
viva_tweet_x
5
2.7k
neo_analytics
1
1.1k
humank
0
220
masashible
0
110
Featured
See All Featured
sachag
446
36k
qrush
285
18k
cassininazir
347
20k
trallard
13
640
jcasabona
7
520
3n
163
22k
geoffreycrofte
18
790
maltzj
500
36k
jrom
114
7.1k
phodgson
87
3.9k
brettharned
93
3k
jponch
103
5k
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