Redux StateをAction駆動で変化させるReducerの仕組み

Redux

Reduxに関してはこちらがおすすめ. わかりやすい.

qiita.com

Reduxはイベントドリブンに似ている

状態をイベントドリブンで変化させる仕組みだと思えば良い.

関心ごとはひたすらに State を誰にどのように操作させるか である. では見ていこう.

Redux の大まかなイメージ

自分はReduxを勉強していて川と魚と釣り人の関係を思い浮かべた.

川に魚が泳いでいる. そしてそれを釣り上げる釣り人がいる.

川には魚が流れ続けている.

魚がEvent, その魚に対応して釣り人(関数)が魚を釣る．

Eventに対応して関数が動く. そんなイメージである.

イベントドリブンなアプリケーションは大体こんなイメージだと思う.

Reduxをシンプルに表したコードを読んで見る

numb86-tech.hatenablog.com

こちらからコードを参照.

import { createStore } from 'redux';

const myActionCreator = (num=1) => {
    return {
        type: "INC_COUNTER",
        num
    };
};

const myReducer = (state={counter:0}, action) => {
    switch(action.type){
        case 'INC_COUNTER':
            return Object.assign({}, state, {
                counter: state.counter + action.num
            });
        default:
            return state;
    };
};

const myStore = createStore(myReducer);

// この時点で、Reduxは機能している
// 以下は動作確認

console.log(myStore.getState());    // { counter: 0 }
myStore.dispatch(myActionCreator(1));
myStore.dispatch(myActionCreator(2));
console.log(myStore.getState());    // { counter: 3 }

このコードを見る限り

• store を作るためには reducer を用意する必要がある.
• reducer は, state と action を引数にとり, state を返す
• reducer は action に応じた処理が実行される
• 上記の場合だと, INC_COUNTER というアクションが来た場合は state に記録されているcountに対して actionに設定されている値を加算する.
• 同じ store に対して action を送る(dispatch) することで state の中身が書き換わっていく.

イメージとしてはこんな感じ.

状態(state)は, store という囲いの中に覆われている． state を操作できるのはあらかじめ定義された reducer しかいない.

reducer は 発行されたaction に対応し実行される.

Action が Event で, reducer が Eventに紐づく関数 と思えばイベントドリブンのアプリとそう大きく変わらない

Reducerの役割

Reducerの役割はシンプルな関数で表される.

   reducer(state, action) => state 

つまり, reducer は state と action を受け取り, state を返すのだ.

もう少し詳細に表すと以下のようになる.

   reducer(oldState, action) => newState 

つまり, reducer は 古いstate を action に応じて 新しいstate に変換する.

Reduxは action をきっかけに reducer を通じて state を変化させる仕組みなのである.

Reduxはイベントドリブンに似ていた

Reduxはイベントドリブンに似ていた.

Action に紐づいて Reducer が発動する. Reducer によって Stateが変化する.

Reducer と Stateは Store によって隠蔽されており, 外部からの操作は Action しか受け付けない.

これによって, 状態変化のフローを一方向に制約している.

なるほど，そんな仕組みだったんだね.

今回はここまで．