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
jmblog
orgachem
biwashi
lambda
oracle4engineer
tomoaki25
ufried
yoshiitaka
sakajunquality
niftycorp
minorun365
sinsoku
comucal
maggiecrowley
keathley
danielanewman
garrettdimon
bkeepers
jennybc
aleyda
scottboms
brettharned
shpigford
brad_frost
jasonvnalue