Reduxのデータフロー

Masanari KIMURA 25views 更新:2017年3月29日

View -> Action -> Middleware -> Reducer -> Store -> View …

  1. store.dispatch(action)をよんでアクションをディスパッチする。actionはtypeフィールドを持つプレーンオブジェクト.
  2. applyMiddlewareでストアにミドルウェアを積む.
  3. Reducerによって、渡されたactionとstateから新しいstateを作成する
  4. 新しく生成されたstateをstoreが保持する

Action

actionはプレーンオブジェクトで、typeフィールドを持たなければならない

{
  type: 'TYPE',
  text: 'SOMETHING'
}

Store

  • stateの保持/取得/更新
  • リスナの登録
let store = createStore(sampleApp);
store.dispatch(somethingAction);

Reducer

actionとstateから新しいstateを生成

function sampleApp(state, action) {
  // something 
  return state
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません