ng-kyoto Angular Meetup #9 での発表資料です。 https://ng-kyoto.connpass.com/event/113358/
雰囲気でやってる⼈向けの Redux 再⼊⾨ng-kyoto Angular Meetup #9 | Jan 18, 2019
View Slide
神保 嘉秀@jmblogじんぼ よしひで
Redux(あるいは ngrx)使ってる⼈
store とか action とか reducer とか dispatch とか middleware とか 実はちゃんと把握してなくて、 雰囲気でコード書いてる⼈
それな
確かに Redux は覚えることが多い (ように⾒える)
ほんとうはすごくシンプルなライブラリ
Redux の概念が理解できていれば ngrx だって vuex だってすぐ理解できる。
Store登場⼈物その1
そもそも、なぜ Redux を使うのか?アプリケーション全体の state 管理に秩序をもたらすためTUBUF
TUBUF例えば、グローバル変数で state を管理することもできる
TUBUFただし、アプリの複雑さが増すと、 state が「いつ」「なぜ」「どのように」変わったのか把握できなくなり、 制御不能となる。
TUBUF4UPSFそんな破綻を防ぐために、Store という「管理会社」を⽤意して、 そのなかで state を厳重に管理しましょうというのが Redux
Store の役割• state を内部に保持する• state へアクセスするための⼿段を提供する• state の更新を通知する⼿段を提供する• state を更新するための⼿段を提供する
store.getState() で最新の state を取得する
store.subscribe() で state 変更時に実⾏したい関数を登録する
この⼿続きがちょっと⾯倒くさい
Action登場⼈物その2
TUBUF4UPSF"DUJPOstate を更新したいときの⼿続きとして、 Action という「依頼状」をStore に送らなければならない。
TUBUF4UPSF"DUJPOAction は Store が⽤意した⼿段 = store.dispatch(action) を 使って送る。("dispatch" は「送る」という意味)TUPSFEJTQBUDI
"DUJPOAction の実態は、JavaScript の Plain Object。 type というプロパティを必ず持たせることが唯⼀の規約。
"DUJPOこの type プロパティは Action Type と呼ばれる。 どういう state 更新をしてもらいたいかを Store 側に伝えるための 「合⾔葉」みたいなもの。
"DUJPOまた、Action を⽣成する関数は Action Creator と呼ばれる。
Action Type も Action Creator も Action に付随するサブキャラ。
では、依頼状(Action)を受け取った Store はどうするか?
Reducer登場⼈物その3
TUBUF4UPSF 3FEVDFS"DUJPOStore に届いた Action(依頼状)は、Store 内部にいる Reducer の元に届けられる。
TUBUF4UPSF 3FEVDFS"DUJPOReducer は受け取った依頼(Action)の中⾝を⾒て、 state を更新する。
4UPSF 3FEVDFSReducer は Store の中で働くので、Store を作成する際に 引数で渡して、あらかじめ待機しておいてもらう。
4UPSF 3FEVDFS⼀⼈の Reducer がすべての依頼をさばくこともできるが、 複数の Reducer に分担させることもできる。 その場合は combineReducers() を使う。
Reducer の実態は、ただの関数。 「今の state」と「Action」を受け取り、「新しい state」を返す。3FEVDFS
3FEVDFS具体的には、Action の type プロパティ(Action Type)をみて、 それに応じた state の更新処理を immutable に⾏う。 知らない type だったら今の state をそのまま返す。
ここまでのまとめ
TUBUF4UPSF 3FEVDFS"DUJPO
Middleware登場⼈物その4
TUBUF4UPSF 3FEVDFS"DUJPO .JEEMFXBSFMiddleware は、送られてきた Action を Reducer の⼿前で捕まえて、 ゴニョゴニョすることができる。
例えば…
送られてきた Action の中⾝をログに出⼒したり、
特定の条件に該当する Action をもみ消したり、
Action に⾃前のプロパティルールを追加したり、
Action として、Plain Object だけではなく、 関数も送ることができるようにしたり(redux-thunk)、(こういった、あとで実⾏してもらうために預ける関数のことを thunk といいます)
Action として、Plain Object だけではなく、 Promise も送ることができるようにしたり(redux-promise)、
特定の Action Type が来たら、スレッドのようなものを起動して、 そこで副作⽤のある処理を実⾏したり(redux-saga)、
という感じで、何でもできる
state を更新する流れのまとめ
TUBUF4UPSF 3FEVDFS"DUJPO .JEEMFXBSF
シンプルでしょ?
おまけ
Repatch
TUBUF4UPSF 3FEVDFS"DUJPORedux(おさらい)
Redux がわずらわしい点Action が存在するせいで、コードが冗⻑になる。 state の更新処理を1つ追加するだけで、 Reducer だけではなく、Action Type も Action Creator も 増やさなければならない。 ⼀つ⼀つは単純なコードだが、だからこそ⾯倒くさい。
だったら、Action を捨てて、Reducer を直接 dispatch しちゃばいいじゃないRepatch
TUBUF4UPSF3FEVDFSRepatch
でも使っています
Angular だったらこういうのもあるらしい
MobX
state ⾃体が超賢いよ!TUBUFMobX
MobX の特徴• state を observable にする• observer を⽤意すれば、state の変更が⾃動的に伝わる• state は直接変更を加えてOK(immutable にしなくてよい)
state の更新は Redux より簡単にできるが、 その分、雑に使うこともできるので、 雰囲気で使うと怪我をしそう。MobX
おわり"MMJDPOTBSFEFTJHOFECZ'SFFQJDGSPN'MBUJDPO