Slide 1
Slide 1 text
雰囲気でやってる⼈向けの Redux 再⼊⾨
ng-kyoto Angular Meetup #9 | Jan 18, 2019
Slide 2
Slide 2 text
神保 嘉秀
@jmblog
じんぼ よしひで
Slide 3
Slide 3 text
Redux（あるいは ngrx）使ってる⼈
Slide 4
Slide 4 text
store とか action とか reducer とか
dispatch とか middleware とか
実はちゃんと把握してなくて、
雰囲気でコード書いてる⼈
Slide 5
Slide 5 text
それな
Slide 6
Slide 6 text
確かに Redux は覚えることが多い
（ように⾒える）
Slide 7
Slide 7 text
ほんとうはすごくシンプルなライブラリ
Slide 8
Slide 8 text
Redux の概念が理解できていれば
ngrx だって vuex だってすぐ理解できる。
Slide 9
Slide 9 text
Store
登場⼈物その1
Slide 10
Slide 10 text
そもそも、なぜ Redux を使うのか？
アプリケーション全体の state 管理に秩序をもたらすため
TUBUF
Slide 11
Slide 11 text
TUBUF
例えば、グローバル変数で state を管理することもできる
Slide 12
Slide 12 text
TUBUF
ただし、アプリの複雑さが増すと、
state が「いつ」「なぜ」「どのように」
変わったのか把握できなくなり、
制御不能となる。
Slide 13
Slide 13 text
TUBUF
4UPSF
そんな破綻を防ぐために、Store という「管理会社」を⽤意して、
そのなかで state を厳重に管理しましょうというのが Redux
Slide 14
Slide 14 text
Store の役割
• state を内部に保持する
• state へアクセスするための⼿段を提供する
• state の更新を通知する⼿段を提供する
• state を更新するための⼿段を提供する
Slide 15
Slide 15 text
Store の役割
• state を内部に保持する
• state へアクセスするための⼿段を提供する
• state の更新を通知する⼿段を提供する
• state を更新するための⼿段を提供する
Slide 16
Slide 16 text
store.getState() で最新の state を取得する
Slide 17
Slide 17 text
Store の役割
• state を内部に保持する
• state へアクセスするための⼿段を提供する
• state の更新を通知する⼿段を提供する
• state を更新するための⼿段を提供する
Slide 18
Slide 18 text
store.subscribe() で state 変更時に実⾏したい関数を登録する
Slide 19
Slide 19 text
Store の役割
• state を内部に保持する
• state へアクセスするための⼿段を提供する
• state の更新を通知する⼿段を提供する
• state を更新するための⼿段を提供する
Slide 20
Slide 20 text
この⼿続きがちょっと⾯倒くさい
Slide 21
Slide 21 text
Action
登場⼈物その2
Slide 22
Slide 22 text
TUBUF
4UPSF
"DUJPO
state を更新したいときの⼿続きとして、
Action という「依頼状」をStore に送らなければならない。
Slide 23
Slide 23 text
TUBUF
4UPSF
"DUJPO
Action は Store が⽤意した⼿段 = store.dispatch(action) を
使って送る。（"dispatch" は「送る」という意味）
TUPSFEJTQBUDI
Slide 24
Slide 24 text
"DUJPO
Action の実態は、JavaScript の Plain Object。
type というプロパティを必ず持たせることが唯⼀の規約。
Slide 25
Slide 25 text
"DUJPO
この type プロパティは Action Type と呼ばれる。
どういう state 更新をしてもらいたいかを Store 側に伝えるための
「合⾔葉」みたいなもの。
Slide 26
Slide 26 text
"DUJPO
また、Action を⽣成する関数は Action Creator と呼ばれる。
Slide 27
Slide 27 text
Action Type も Action Creator も Action に付随するサブキャラ。
Slide 28
Slide 28 text
では、依頼状（Action）を受け取った Store はどうするか？
Slide 29
Slide 29 text
Reducer
登場⼈物その3
Slide 30
Slide 30 text
TUBUF
4UPSF 3FEVDFS
"DUJPO
Store に届いた Action（依頼状）は、Store 内部にいる
Reducer の元に届けられる。
Slide 31
Slide 31 text
TUBUF
4UPSF 3FEVDFS
"DUJPO
Reducer は受け取った依頼（Action）の中⾝を⾒て、
state を更新する。
Slide 32
Slide 32 text
4UPSF 3FEVDFS
Reducer は Store の中で働くので、Store を作成する際に
引数で渡して、あらかじめ待機しておいてもらう。
Slide 33
Slide 33 text
4UPSF 3FEVDFS
⼀⼈の Reducer がすべての依頼をさばくこともできるが、
複数の Reducer に分担させることもできる。
その場合は combineReducers() を使う。
Slide 34
Slide 34 text
Reducer の実態は、ただの関数。
「今の state」と「Action」を受け取り、「新しい state」を返す。
3FEVDFS
Slide 35
Slide 35 text
3FEVDFS
具体的には、Action の type プロパティ（Action Type）をみて、
それに応じた state の更新処理を immutable に⾏う。
知らない type だったら今の state をそのまま返す。
Slide 36
Slide 36 text
ここまでのまとめ
Slide 37
Slide 37 text
TUBUF
4UPSF 3FEVDFS
"DUJPO
Slide 38
Slide 38 text
Middleware
登場⼈物その4
Slide 39
Slide 39 text
TUBUF
4UPSF 3FEVDFS
"DUJPO .JEEMFXBSF
Middleware は、送られてきた Action を Reducer の⼿前で捕まえて、
ゴニョゴニョすることができる。
Slide 40
Slide 40 text
例えば…
Slide 41
Slide 41 text
送られてきた Action の中⾝をログに出⼒したり、
Slide 42
Slide 42 text
特定の条件に該当する Action をもみ消したり、
Slide 43
Slide 43 text
Action に⾃前のプロパティルールを追加したり、
Slide 44
Slide 44 text
Action として、Plain Object だけではなく、
関数も送ることができるようにしたり（redux-thunk）、
（こういった、あとで実⾏してもらうために預ける関数のことを thunk といいます）
Slide 45
Slide 45 text
Action として、Plain Object だけではなく、
Promise も送ることができるようにしたり（redux-promise）、
Slide 46
Slide 46 text
特定の Action Type が来たら、スレッドのようなものを起動して、
そこで副作⽤のある処理を実⾏したり（redux-saga）、
Slide 47
Slide 47 text
という感じで、何でもできる
Slide 48
Slide 48 text
state を更新する流れのまとめ
Slide 49
Slide 49 text
TUBUF
4UPSF 3FEVDFS
"DUJPO .JEEMFXBSF
Slide 50
Slide 50 text
シンプルでしょ？
Slide 51
Slide 51 text
おまけ
Slide 52
Slide 52 text
Repatch
Slide 53
Slide 53 text
TUBUF
4UPSF 3FEVDFS
"DUJPO
Redux（おさらい）
Slide 54
Slide 54 text
Redux がわずらわしい点
Action が存在するせいで、コードが冗⻑になる。
state の更新処理を1つ追加するだけで、
Reducer だけではなく、Action Type も Action Creator も
増やさなければならない。
⼀つ⼀つは単純なコードだが、だからこそ⾯倒くさい。
Slide 55
Slide 55 text
だったら、Action を捨てて、
Reducer を直接 dispatch しちゃばいいじゃない
Repatch
Slide 56
Slide 56 text
TUBUF
4UPSF
3FEVDFS
Repatch
Slide 57
Slide 57 text
Repatch
Slide 58
Slide 58 text
でも使っています
Slide 59
Slide 59 text
Angular だったらこういうのもあるらしい
Slide 60
Slide 60 text
MobX
Slide 61
Slide 61 text
state ⾃体が超賢いよ！
TUBUF
MobX
Slide 62
Slide 62 text
MobX の特徴
• state を observable にする
• observer を⽤意すれば、state の変更が⾃動的に伝わる
• state は直接変更を加えてOK（immutable にしなくてよい）
Slide 63
Slide 63 text
MobX
Slide 64
Slide 64 text
state の更新は Redux より簡単にできるが、
その分、雑に使うこともできるので、
雰囲気で使うと怪我をしそう。
MobX
Slide 65
Slide 65 text
おわり
"MMJDPOTBSFEFTJHOFECZ'SFFQJDGSPN'MBUJDPO