雰囲気でやってる人向けの 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. 4.

    store とか action とか reducer とか
 dispatch とか middleware とか


    実はちゃんと把握してなくて、
 雰囲気でコード書いてる⼈
  2. 14.

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

    の更新を通知する⼿段を提供する • state を更新するための⼿段を提供する
  3. 15.

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

    の更新を通知する⼿段を提供する • state を更新するための⼿段を提供する
  4. 17.

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

    の更新を通知する⼿段を提供する • state を更新するための⼿段を提供する
  5. 19.

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

    の更新を通知する⼿段を提供する • state を更新するための⼿段を提供する
  6. 23.

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


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

    TUBUF 4UPSF 3FEVDFS "DUJPO .JEEMFXBSF Middleware は、送られてきた Action を Reducer

    の⼿前で捕まえて、
 ゴニョゴニョすることができる。
  8. 51.
  9. 52.
  10. 54.

    Redux がわずらわしい点 Action が存在するせいで、コードが冗⻑になる。
 
 state の更新処理を1つ追加するだけで、
 Reducer だけではなく、Action Type

    も Action Creator も
 増やさなければならない。
 ⼀つ⼀つは単純なコードだが、だからこそ⾯倒くさい。
  11. 57.
  12. 60.
  13. 62.

    MobX の特徴 • state を observable にする • observer を⽤意すれば、state

    の変更が⾃動的に伝わる • state は直接変更を加えてOK(immutable にしなくてよい)
  14. 63.