Redux Basics (3): Store 翻訳

# **はじめに**
- [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の翻訳の続きです。今回はStoreの翻訳となります。翻訳で間違いがあると思いますがそこはご了承ください。

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

_翻訳ここから_

# **Store**
前のセクションでは、我々は"何が起こった化についての事実を表す"[Action](http://redux.js.org/docs/basics/Actions.html)と、これらActionによって状態を更新する[Reducer](http://redux.js.org/docs/basics/Reducers.html)を定義しました。

**Store**はそれらをまとめるオブジェクトです。Storeは以下の責務を持ちます。

- アプリケーションの状態を保持する
- [`getState()`](http://redux.js.org/docs/api/Store.html#getState)を経由して状態にアクセスするのを許可する
- [`dispatch(action)`](http://redux.js.org/docs/api/Store.html#dispatch)を経由して状態が更新されるのを許可する
- [`subscribe(listener)`](http://redux.js.org/docs/api/Store.html#subscribe)を経由してリスナーを登録する
- [`subscribe(listener)`](http://redux.js.org/docs/api/Store.html#subscribe)によって返される関数を経由してリスナーの解除を取り扱う

Reduxアプリケーションでは一つのStoreのみ持つことに注意するのは重要です。ロジックを取り扱うデータを分割したいとき、あなたは多くのStoreの代わりに[Reducer構成](http://redux.js.org/docs/basics/Reducers.html#splitting-reducers)を使います。

もしあなたがReducerを持つならば、Storeを作成するのは簡単です。[前のセクション](http://redux.js.org/docs/basics/Reducers.html)で、我々は複数のReducerを一つに組み合わせるために[`combineReducers()`](http://redux.js.org/docs/api/combineReducers.html)を使いました。我々は今それをインポートし、[`createStore()`](http://redux.js.org/docs/api/createStore.html)にそれを渡します。

```js
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
```

あなたは[`createStore()`](http://redux.js.org/docs/api/createStore.html)の二番目の引数として初期状態を任意に明示するかもしれません。これはサーバー上で動いているReduxアプリケーションの状態を調和させるためにクライアントの状態を水和することにとって便利です。

```js
let store = createStore(todoApp, window.STATE_FROM_SERVER)
```

## **Actionを送る**
Storeを作成した今、我々のプログラムが動くのを確かめてみましょう！どんなUIがなしでさ、我々はすでに更新したロジックをテストできます。

```js
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が変更することによって状態を保持する原因となるかを見ることができます:

http://i.imgur.com/zMMtoMz.png

我々はUIを書き始める前に我々のアプリの振る舞いをはっきり述べました。我々はこのチュートリアルでこれをしませんが、このポイントとしてあなたはReducerとAction Creatorのためにテストを書くことができます。あなたは何もモックを必要としません、それはそれらが[単純](http://redux.js.org/docs/introduction/ThreePrinciples.html#changes-are-made-with-pure-functions)な関数だからです。それらを呼び、それらが返したものを主張します。

## **ソースコード**
### *`index.js`*
```js
import { createStore } from 'redux'
import todoApp from './reducers'

let store = createStore(todoApp)
```

## **次のステップ**
我々のTodoアプリのためにUIを作る前に、[どのようにReduxのアプリケーション内でデータが流れるか](http://redux.js.org/docs/basics/DataFlow.html)を見ることで遠回りをしましょう。

_翻訳ここまで_

# **おわりに**
次は、[Redux Basics (4): Data Flow 翻訳](http://qiita.com/uramonk/items/2e8d89ba0829fe657025)です。