redux

Redux入門 5日目 Reduxの基本・Data Flow(公式ドキュメント和訳)

More than 3 years have passed since last update.

前回 Redux入門 4日目 Reduxの基本・Stores

今回はReduxのデータの流れをおさらいします。

Reduxのデータフローの基本は、一方向ということです。

すべてのReduxアプリケーションでのデータのライフサイクルは以下の4つのステップをたどります。

1. store.dispatch(action)を呼ぶ

スクリーンショット 2015-11-22 23.33.31.png


  • actionは「何をする」という内容を持ったオブジェクト。

  • store.dispatch(action)はアプリケーション上のどこからでも読み出すことが出来ます。

2. storeは受けたactionと現在保持しているstateをreducerへ渡す

スクリーンショット 2015-11-22 23.55.04.png


  • reducerはactionとstateを元に、新しいstateを作成して返すメソッド

  • reducerのメソッドは副作用を起こさないものでなければならず、Aというstateに対して毎回必ずBというstateを返すような関数でなければならない
    スクリーンショット 2015-11-22 23.33.49.png

3. 子reducerの返したstateを親reducerがまとめて一つのツリー状のstateを返す

スクリーンショット 2015-11-22 23.34.10.png


  • stateのプロパティはツリー状になっており、reducerはプロパティに対応した子reducerが処理し、また一つのツリー状のstateとして返す。

  • 親reducerをどのように実装するかは自由。Reduxでは、reducerを分割するためのcombineReducers()をヘルパーとして提供しています。

4. reducerが作成した新しいstateをstoreが保存するスクリーンショット 2015-11-22 23.34.22.png


  • store.subscribe(listener) でリスナーを登録した場合、リスナーではstore.getState()で現在のstateを取得してreducerが呼び出される。

続きRedux入門 6日目 ReduxとReactの連携