はじめに

ReduxのBasicsの翻訳の続きです。今回はData Flowの翻訳となります。翻訳で間違いがあると思いますがそこはご了承ください。

翻訳は下記ページの10/31時点のものとなります。
http://redux.js.org/docs/basics/DataFlow.html

翻訳ここから

データの流れ

Reduxのアーキテクチャは厳密で一方向のデータの流れでまわります。

これは、アプリケーションのすべてのデータは同じライブサイクルのパターンに従い、あなたのアプリのロジックをより予測でき、理解しやすいようにすることを意味します。それはまたデータの正規化を促進しますので、あなたは複数で、独立した、他のものに気づかない同じデータのコピーで終わることはありません。

もしあなたがまだ確信していないなら、一方向のデータの流れを支持する強制的な引数のためのMotivationとThe Case for Fluxを読みましょう。

Reduxアプリのデータライフサイクルはこれら４つのステップに従います:

1. あなたはstore.dispatch(action)を呼び出します。
Actionは何が起こったかを述べる平凡なオブジェクトです。例:

{ type: 'LIKE_ARTICLE', articleId: 42 }
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
{ type: 'ADD_TODO', text: 'Read the Redux docs.' }

ニュースの大変短い断片としてActionのことを考えます。“多くの好まれた記事42。”または“Reduxのドキュメントを読む。”はTodoのリストに追加されました。

あなたはあなたのアプリ内ならどこからでも、コンポーネントとXHRコールバックを含み、間隔を予定されてさえ、store.dispatch(action)を呼び出せます。

2. ReduxのStoreはあなたが与えたReducer関数を呼び出します。
StoreはReducerへ二つの引数を渡します: 現在の状態ツリーとActionです。例えば、Todoアプリでは、ルートのReducerがこのように何かを受け取るでしょう。

 // The current application state (list of todos and chosen filter)
 let previousState = {
   visibleTodoFilter: 'SHOW_ALL',
   todos: [ 
     {
       text: 'Read the docs.',
       complete: false
     }
   ]
 }

 // The action being performed (adding a todo)
 let action = {
   type: 'ADD_TODO',
   text: 'Understand the flow.'
 }

 // Your reducer returns the next application state
 let nextState = todoApp(previousState, action)

Reducerは単純な関数であることに注意してください。ただ次の状態を計算するだけです。完全に予測できるべきです: 多くの回数同じ入力で呼び出すことは、同じ出力を提供するべきです。API呼び出しやルーター遷移のような副作用を実行するべきではありません。これらはActionが送られる前に起こるべきです。

3. ルートのReducerは一つの状態ツリーへ複数のReducerの出力を結合するころができます。
どのようにあなたが構造化したルートのReducerが完全にやりこなせるでしょうか。ReduxはcombineReducers()ヘルパー関数を出荷し、状態ツリーの一つの枝をそれぞれ管理する分裂したルートのReducerを分割した関数へ送るのに便利です。

ここでどのようにcombineReducers()は動くでしょうか。二つのReducerを持ち、一つはTodoリストのため、もう一つは現在選択されているフィルターの設定のためと言いましょう。

 function todos(state = [], action) {
   // Somehow calculate it...
   return nextState
 }

 function visibleTodoFilter(state = 'SHOW_ALL', action) {
   // Somehow calculate it...
   return nextState
 }

 let todoApp = combineReducers({
   todos,
   visibleTodoFilter
 })

Actionを発行したとき、combineReducersによって返されるtodoAppは両方のReducerを呼び出します。

 let nextTodos = todos(state.todos, action)
 let nextVisibleTodoFilter = visibleTodoFilter(state.visibleTodoFilter, action)

それから一つの状態ツリーへ両方の結果の集合を結合します。

 return {
   todos: nextTodos,
   visibleTodoFilter: nextVisibleTodoFilter
 }

combineReducers()は使いやすいヘルパーユーティリティではありますが、あなたはそれを使う必要はありません; 自身のルートReducerを書くのに気兼ねしないでください！

4. ReduxのStoreはルートのReducerから返された完全な状態ツリーを保存します。
この新しいツリーはあなたのアプリの次の状態です！store.subscribe(listener)で登録されたすべてのリスナーは呼び出されるでしょう; リスナーは現在の状態を取得するためにstore.getState()を呼び出すことができます。

今、UIは新しい状態に反映するために更新されます。もしあなたがReact Reduxのようなバインディングを使うなら、component.setState(newState)が呼ばれることはポイントです。

次のステップ

あなたは今どのようにReduxが動くかを知りました。Reactアプリにそれを接続してみましょう。

上級ユーザーへの注意
もしすでに基本のコンセプトに精通しており、以前にこのチュートリアルを完了しているなら、どのようにミドルウェアがReducerに到達する前に非同期Actionを変換するかを学ぶために、上級チュートリアルの非同期の流れを確認することを忘れないでください。

翻訳ここまで

おわりに

次は、Redux Basics (5): Usage with React 翻訳です。

Redux Basics (4): Data Flow 翻訳

はじめに

データの流れ

次のステップ

おわりに