$30 off During Our Annual Pro Sale. View Details »

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

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

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

Yoshihide Jimbo

January 18, 2019
Tweet

More Decks by Yoshihide Jimbo

Other Decks in Technology

Transcript

  1. 雰囲気でやってる⼈向けの Redux 再⼊⾨
    ng-kyoto Angular Meetup #9 | Jan 18, 2019

    View Slide

  2. 神保 嘉秀
    @jmblog
    じんぼ よしひで

    View Slide

  3. Redux(あるいは ngrx)使ってる⼈

    View Slide

  4. store とか action とか reducer とか

    dispatch とか middleware とか

    実はちゃんと把握してなくて、

    雰囲気でコード書いてる⼈

    View Slide

  5. それな

    View Slide

  6. 確かに Redux は覚えることが多い

    (ように⾒える)

    View Slide

  7. ほんとうはすごくシンプルなライブラリ

    View Slide

  8. Redux の概念が理解できていれば

    ngrx だって vuex だってすぐ理解できる。

    View Slide

  9. Store
    登場⼈物その1

    View Slide

  10. そもそも、なぜ Redux を使うのか?
    アプリケーション全体の state 管理に秩序をもたらすため
    TUBUF

    View Slide

  11. TUBUF
    例えば、グローバル変数で state を管理することもできる

    View Slide

  12. TUBUF
    ただし、アプリの複雑さが増すと、

    state が「いつ」「なぜ」「どのように」
    変わったのか把握できなくなり、

    制御不能となる。

    View Slide

  13. TUBUF
    4UPSF
    そんな破綻を防ぐために、Store という「管理会社」を⽤意して、

    そのなかで state を厳重に管理しましょうというのが Redux

    View Slide

  14. Store の役割
    • state を内部に保持する
    • state へアクセスするための⼿段を提供する
    • state の更新を通知する⼿段を提供する
    • state を更新するための⼿段を提供する

    View Slide

  15. Store の役割
    • state を内部に保持する
    • state へアクセスするための⼿段を提供する
    • state の更新を通知する⼿段を提供する
    • state を更新するための⼿段を提供する

    View Slide

  16. store.getState() で最新の state を取得する

    View Slide

  17. Store の役割
    • state を内部に保持する
    • state へアクセスするための⼿段を提供する
    • state の更新を通知する⼿段を提供する
    • state を更新するための⼿段を提供する

    View Slide

  18. store.subscribe() で state 変更時に実⾏したい関数を登録する

    View Slide

  19. Store の役割
    • state を内部に保持する
    • state へアクセスするための⼿段を提供する
    • state の更新を通知する⼿段を提供する
    • state を更新するための⼿段を提供する

    View Slide

  20. この⼿続きがちょっと⾯倒くさい

    View Slide

  21. Action
    登場⼈物その2

    View Slide

  22. TUBUF
    4UPSF
    "DUJPO
    state を更新したいときの⼿続きとして、

    Action という「依頼状」をStore に送らなければならない。

    View Slide

  23. TUBUF
    4UPSF
    "DUJPO
    Action は Store が⽤意した⼿段 = store.dispatch(action) を

    使って送る。("dispatch" は「送る」という意味)
    TUPSFEJTQBUDI

    View Slide

  24. "DUJPO
    Action の実態は、JavaScript の Plain Object。

    type というプロパティを必ず持たせることが唯⼀の規約。

    View Slide

  25. "DUJPO
    この type プロパティは Action Type と呼ばれる。

    どういう state 更新をしてもらいたいかを Store 側に伝えるための

    「合⾔葉」みたいなもの。

    View Slide

  26. "DUJPO
    また、Action を⽣成する関数は Action Creator と呼ばれる。

    View Slide

  27. Action Type も Action Creator も Action に付随するサブキャラ。

    View Slide

  28. では、依頼状(Action)を受け取った Store はどうするか?

    View Slide

  29. Reducer
    登場⼈物その3

    View Slide

  30. TUBUF
    4UPSF 3FEVDFS
    "DUJPO
    Store に届いた Action(依頼状)は、Store 内部にいる

    Reducer の元に届けられる。

    View Slide

  31. TUBUF
    4UPSF 3FEVDFS
    "DUJPO
    Reducer は受け取った依頼(Action)の中⾝を⾒て、

    state を更新する。

    View Slide

  32. 4UPSF 3FEVDFS
    Reducer は Store の中で働くので、Store を作成する際に

    引数で渡して、あらかじめ待機しておいてもらう。

    View Slide

  33. 4UPSF 3FEVDFS
    ⼀⼈の Reducer がすべての依頼をさばくこともできるが、

    複数の Reducer に分担させることもできる。

    その場合は combineReducers() を使う。

    View Slide

  34. Reducer の実態は、ただの関数。

    「今の state」と「Action」を受け取り、「新しい state」を返す。
    3FEVDFS

    View Slide

  35. 3FEVDFS
    具体的には、Action の type プロパティ(Action Type)をみて、

    それに応じた state の更新処理を immutable に⾏う。

    知らない type だったら今の state をそのまま返す。

    View Slide

  36. ここまでのまとめ

    View Slide

  37. TUBUF
    4UPSF 3FEVDFS
    "DUJPO

    View Slide

  38. Middleware
    登場⼈物その4

    View Slide

  39. TUBUF
    4UPSF 3FEVDFS
    "DUJPO .JEEMFXBSF
    Middleware は、送られてきた Action を Reducer の⼿前で捕まえて、

    ゴニョゴニョすることができる。

    View Slide

  40. 例えば…

    View Slide

  41. 送られてきた Action の中⾝をログに出⼒したり、

    View Slide

  42. 特定の条件に該当する Action をもみ消したり、

    View Slide

  43. Action に⾃前のプロパティルールを追加したり、

    View Slide

  44. Action として、Plain Object だけではなく、

    関数も送ることができるようにしたり(redux-thunk)、
    (こういった、あとで実⾏してもらうために預ける関数のことを thunk といいます)

    View Slide

  45. Action として、Plain Object だけではなく、

    Promise も送ることができるようにしたり(redux-promise)、

    View Slide

  46. 特定の Action Type が来たら、スレッドのようなものを起動して、

    そこで副作⽤のある処理を実⾏したり(redux-saga)、

    View Slide

  47. という感じで、何でもできる

    View Slide

  48. state を更新する流れのまとめ

    View Slide

  49. TUBUF
    4UPSF 3FEVDFS
    "DUJPO .JEEMFXBSF

    View Slide

  50. シンプルでしょ?

    View Slide

  51. おまけ

    View Slide

  52. Repatch

    View Slide

  53. TUBUF
    4UPSF 3FEVDFS
    "DUJPO
    Redux(おさらい)

    View Slide

  54. Redux がわずらわしい点
    Action が存在するせいで、コードが冗⻑になる。


    state の更新処理を1つ追加するだけで、

    Reducer だけではなく、Action Type も Action Creator も

    増やさなければならない。

    ⼀つ⼀つは単純なコードだが、だからこそ⾯倒くさい。

    View Slide

  55. だったら、Action を捨てて、
    Reducer を直接 dispatch しちゃばいいじゃない
    Repatch

    View Slide

  56. TUBUF
    4UPSF
    3FEVDFS
    Repatch

    View Slide

  57. Repatch

    View Slide

  58. でも使っています

    View Slide

  59. Angular だったらこういうのもあるらしい

    View Slide

  60. MobX

    View Slide

  61. state ⾃体が超賢いよ!
    TUBUF
    MobX

    View Slide

  62. MobX の特徴
    • state を observable にする
    • observer を⽤意すれば、state の変更が⾃動的に伝わる
    • state は直接変更を加えてOK(immutable にしなくてよい)

    View Slide

  63. MobX

    View Slide

  64. state の更新は Redux より簡単にできるが、

    その分、雑に使うこともできるので、

    雰囲気で使うと怪我をしそう。
    MobX

    View Slide

  65. おわり
    "MMJDPOTBSFEFTJHOFECZ'SFFQJDGSPN'MBUJDPO

    View Slide