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

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

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

790f55ccde7a62df8f25747586657090?s=128

Yoshihide Jimbo

January 18, 2019
Tweet

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. おわり "MMJDPOTBSFEFTJHOFECZ'SFFQJDGSPN'MBUJDPO