console だけでわかる Redux 前編 ~store/action/reducer 編~

この記事の対象

• Redux について知りたいけどよくわからんという初学者
• Redux をなんとなく使っているけど、全体像が理解できていない人

nodeのREPL(console)のみを使って、reduxというのは何なのかを説明してみます。
わかりやすさ と 手軽さ に特化しています。
reducerの統合などの複雑化に対抗するための概念や、思想やそもそもなんで Redux すると嬉しいの？ ということについては、他にもいい記事がたくさんあるので、そちらで補完していただければと思います。

そもそも Redux って？

一言でいうならばアプリケーションの持つ状態(state)を一箇所で管理するためのライブラリ です。
React と併用することを想定されて作られて居ますが、 単体でも動作します。 だからコマンドラインだけでできるんですね。

環境構築

とりあえず nodeが使える状況で以下のコマンドを叩いてください。

$ mkdir redux-console
$ cd redux-console
$ npm init
$ npm install redux
$ node

node_modules があるディレクトリで node の REPL を立ち上げるとライブラリが呼べるの、地味に便利なのでよく使います。

以下、コードはすべて node の REPL です。

redux を用意

const redux = require('redux');

まず node コンソールを立ち上げ、redux オブジェクトを用意します。

reducer を作る

const counterReducer = (state = { counter: 0 }, action) => {
   if (action.type==='COUNT_UP') {
      return { counter: state.counter+1 };
    } else {
       return state;
     }
   };

reducer は、redux アプリの状態(state)を変化させるための関数です。
引数に以下の二つをとります。

• 変化前の状態を表す state オブジェクト
• ユーザがどのような操作をとったかを表現する action オブジェクト

戻り値は

• ユーザが操作を行なった結果を表現する state オブジェクト

です。
今回は数を増やす'COUNT_UP'というをアクションを定義しました。
なお、今回コマンドライン上で各関数を再定義することがあるため let を使っています。実際に使うときはもちろん const を使ってください。

reducer を store に渡す

const storeA = redux.createStore(counterReducer);

redux.createStore に reducer を渡し、reducerが登録されたstoreを生成します。
storeオブジェクトはreduxでstate 管理を一手に引き受ける オブジェクトです。
stateを保持し、また登録されたreducer はこの store オブジェクトが呼び出します。それ以外の場所からreducerが呼び出されることはありません。 state を触りたいときは、store に操作を依頼します。
例えば、state オブジェクトを取得したければ、store.getState()を使います。

storeA.getState();
// -> { counter: 0 }

action を定義して dispatch する

const countAction = { type: 'COUNT_UP' };
storeA.dispatch(countAction);
storeA.getState();
// -> { counter: 1 }
storeA.dispatch(countAction);
storeA.getState();
// ->{ counter: 2 }

action は、store を操作するためのコマンド です。action を store.dispatch()することにより、store はその action を使って reducer を呼び出し、state を更新します。

後編　~actionCreator/middleware編~　に続きます。

余談

実はこの記事、かなり前に受講した、meteo-fanさんの「JavaScript を学ぶ Web アプリ開発塾」で教えていただいたチュートリアルのまとめです。
その説明があまりにわかりやすく、「これは独り占めにするのは勿体無い！」と思ったので、講師の方に許可をとってまとめよう....と、したのがかれこれ半年前。200 行くらいまで作ったところで次元の狭間に飲み込まれ、本日発掘されました。
まだ需要もある記事を SSD の肥やしにしておくのもアレなので公開しようと思います。