雰囲気でやってる人向けの Redux 再入門

ng-kyoto Angular Meetup #9 での発表資料です。
https://ng-kyoto.connpass.com/event/113358/

Transcript

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