はじめに
- 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の翻訳の続きです。今回はStoreの翻訳となります。翻訳で間違いがあると思いますがそこはご了承ください。
翻訳は下記ページの10/31時点のものとなります。
http://redux.js.org/docs/basics/Store.html
翻訳ここから
Store
前のセクションでは、我々は"何が起こった化についての事実を表す"Actionと、これらActionによって状態を更新するReducerを定義しました。
Storeはそれらをまとめるオブジェクトです。Storeは以下の責務を持ちます。
- アプリケーションの状態を保持する
-
getState()を経由して状態にアクセスするのを許可する -
dispatch(action)を経由して状態が更新されるのを許可する -
subscribe(listener)を経由してリスナーを登録する -
subscribe(listener)によって返される関数を経由してリスナーの解除を取り扱う
Reduxアプリケーションでは一つのStoreのみ持つことに注意するのは重要です。ロジックを取り扱うデータを分割したいとき、あなたは多くのStoreの代わりにReducer構成を使います。
もしあなたがReducerを持つならば、Storeを作成するのは簡単です。前のセクションで、我々は複数のReducerを一つに組み合わせるためにcombineReducers()を使いました。我々は今それをインポートし、createStore()にそれを渡します。
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
あなたはcreateStore()の二番目の引数として初期状態を任意に明示するかもしれません。これはサーバー上で動いているReduxアプリケーションの状態を調和させるためにクライアントの状態を水和することにとって便利です。
let store = createStore(todoApp, window.STATE_FROM_SERVER)
Actionを送る
Storeを作成した今、我々のプログラムが動くのを確かめてみましょう！どんなUIがなしでさ、我々はすでに更新したロジックをテストできます。
import { addTodo, toggleTodo, setVisibilityFilter, VisibilityFilters } from './actions'
// Log the initial state
console.log(store.getState())
// Every time the state changes, log it
// Note that subscribe() returns a function for unregistering the listener
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
)
// Dispatch some actions
store.dispatch(addTodo('Learn about actions'))
store.dispatch(addTodo('Learn about reducers'))
store.dispatch(addTodo('Learn about store'))
store.dispatch(toggleTodo(0))
store.dispatch(toggleTodo(1))
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))
// Stop listening to state updates
unsubscribe()
あなたはどのようにこれがStoreが変更することによって状態を保持する原因となるかを見ることができます:
我々はUIを書き始める前に我々のアプリの振る舞いをはっきり述べました。我々はこのチュートリアルでこれをしませんが、このポイントとしてあなたはReducerとAction Creatorのためにテストを書くことができます。あなたは何もモックを必要としません、それはそれらが単純な関数だからです。それらを呼び、それらが返したものを主張します。
ソースコード
index.js
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
次のステップ
我々のTodoアプリのためにUIを作る前に、どのようにReduxのアプリケーション内でデータが流れるかを見ることで遠回りをしましょう。
翻訳ここまで