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

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