Redux Basics (4): Data Flow 翻訳

# **はじめに**
- [Redux Basics (1): Actions 翻訳](http://qiita.com/uramonk/items/28316e20ad6fb7968993)
- [Redux Basics (2): Reducers 翻訳](http://qiita.com/uramonk/items/3bce34db8cfd0587a63b)
- [Redux Basics (3): Store 翻訳](http://qiita.com/uramonk/items/a6cfa3fa7f7c6827c2b1)
- [Redux Basics (4): Data Flow 翻訳](http://qiita.com/uramonk/items/2e8d89ba0829fe657025)
- [Redux Basics (5): Usage with React 翻訳](http://qiita.com/uramonk/items/b4712620690711466b07)

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

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

_翻訳ここから_

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

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

もしあなたがまだ確信していないなら、一方向のデータの流れを支持する強制的な引数のための[Motivation](http://redux.js.org/docs/introduction/Motivation.html)と[The Case for Flux](https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6)を読みましょう。

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

**1. あなたは[`store.dispatch(action)`](http://redux.js.org/docs/api/Store.html#dispatch)を呼び出します。**
[Action](http://redux.js.org/docs/basics/Actions.html)は何が起こったかを述べる平凡なオブジェクトです。例:

```js
{ 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)`](http://redux.js.org/docs/api/Store.html#dispatch)を呼び出せます。

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

```js
 // 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()`](http://redux.js.org/docs/api/combineReducers.html)ヘルパー関数を出荷し、状態ツリーの一つの枝をそれぞれ管理する分裂したルートのReducerを分割した関数へ送るのに便利です。

ここでどのように[`combineReducers()`](http://redux.js.org/docs/api/combineReducers.html)は動くでしょうか。二つのReducerを持ち、一つはTodoリストのため、もう一つは現在選択されているフィルターの設定のためと言いましょう。

```js
 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を呼び出します。

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

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

```js
 return {
   todos: nextTodos,
   visibleTodoFilter: nextVisibleTodoFilter
 }
```

[`combineReducers()`](http://redux.js.org/docs/api/combineReducers.html)は使いやすいヘルパーユーティリティではありますが、あなたはそれを使う必要はありません; 自身のルートReducerを書くのに気兼ねしないでください！

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

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

## 次のステップ
あなたは今どのようにReduxが動くかを知りました。[Reactアプリにそれを接続してみましょう。](http://redux.js.org/docs/basics/UsageWithReact.html)

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

_翻訳ここまで_

# **おわりに**
次は、[Redux Basics (5): Usage with React 翻訳](http://qiita.com/uramonk/items/b4712620690711466b07)です。