はじめに
- Redux Basics (1): Actions 翻訳
- Redux Basics (2): Reducers 翻訳
- Redux Basics (3): Store 翻訳
- Redux Basics (4): Data Flow 翻訳
- Redux Basics (5): Usage with React 翻訳
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を変換するかを学ぶために、上級チュートリアルの非同期の流れを確認することを忘れないでください。
翻訳ここまで