超訳 Redux Documentation - ストア(store)

Redux Documentation の Store の超訳です。

ストア(store)

ストア は レジューサ(reducer) と アクション(action) を統合するオブジェクトです。ストアには以下の責務があります。

• アプリケーションのステートを保持する
• getState() を通じてステートにアクセスできるようにさせる
• dispatch(action) を通じてステートを更新できるようにさせる
• subscribe(listener) を通じてリスナーを登録させる

Redux アプリケーションにおいてはストアは一つのみです。データを処理するロジックを分割したくなったとき、ストアを色々と作るかわりに レジューサコンポジション(reducer composition) を使いましょう。

前節では、いくつかのレジューサを combineReducers() を利用して一つにまとめました。これからそれをインポートして createStore() に渡してみましょう。

import { createStore } from 'redux';
import todoApp from './reducers';

let store = createStore(todoApp);

createStore() に二つ目の引数を指定することで初期ステートをセットすることも可能です。サーバー上で実行されている Redux アプリケーションのステートとクライアントのステートを合わせるのに有用です。

let store = createStore(todoApp, window.STATE_FROM_SERVER);

アクションをディスパッチする

ストアを作ったのでプログラムが正しく動作するか確認してみましょう。UIなしでも更新ロジックのテストをすることができます。

import { addTodo, completeTodo, setVisibilityFilter, VisibilityFilters } from './actions';

// 初期ステートのログ
console.log(store.getState());

// ステートが変更されるたびにログ
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

// アクションをディスパッチする
store.dispatch(addTodo('アクションについて学ぶ'));
store.dispatch(addTodo('レジューサについて学ぶ'));
store.dispatch(addTodo('ストアについて学ぶ'));
store.dispatch(completeTodo(0));
store.dispatch(completeTodo(1));
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED));

// ステートの更新のリッスンを止める
unsubscribe();

ストアに保持されているステートにどのような変化が起きているのか確認することができます。

UIを書き始める前にアプリの動作について定義しました。しかし、これをしたかったわけではなく、レジューサとアクションクリエータのためのテストを書くことができるという点について強調したかったのです。単なる関数なのでモックを作る必要がないのです。

ソースコード

index.js

import { createStore } from 'redux';
import todoApp from './reducers';

let store = createStore(todoApp);

次の節では

TODOアプリのUIを作る前に、Redux アプリケーション内でデータがどのように流れるのか についてちょっと寄り道します。