Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

超訳 Redux Documentation - ストア(store)

More than 5 years have passed since last update.

Redux DocumentationStore の超訳です。

ストア(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 アプリケーション内でデータがどのように流れるのか についてちょっと寄り道します。

kobanyan
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away