Upgrade to Pro — share decks privately, control downloads, hide ads and more …

雰囲気でやってる人向けの 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. store とか action とか reducer とか
 dispatch とか middleware とか


    実はちゃんと把握してなくて、
 雰囲気でコード書いてる⼈
  2. Store の役割 • state を内部に保持する • state へアクセスするための⼿段を提供する • state

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

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

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

    の更新を通知する⼿段を提供する • state を更新するための⼿段を提供する
  6. TUBUF 4UPSF "DUJPO Action は Store が⽤意した⼿段 = store.dispatch(action) を


    使って送る。("dispatch" は「送る」という意味) TUPSFEJTQBUDI
  7. TUBUF 4UPSF 3FEVDFS "DUJPO .JEEMFXBSF Middleware は、送られてきた Action を Reducer

    の⼿前で捕まえて、
 ゴニョゴニョすることができる。
  8. Redux がわずらわしい点 Action が存在するせいで、コードが冗⻑になる。
 
 state の更新処理を1つ追加するだけで、
 Reducer だけではなく、Action Type

    も Action Creator も
 増やさなければならない。
 ⼀つ⼀つは単純なコードだが、だからこそ⾯倒くさい。
  9. MobX の特徴 • state を observable にする • observer を⽤意すれば、state

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