See the Elephant

1992生まれのプログラマが書くエンジニアブログ

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

Redux

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

qiita.com

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

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

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

Redux の大まかなイメージ

f:id:namu_r21:20181015191131p:plain

自分は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 は, stateaction を引数にとり, state を返す
  • reduceraction に応じた処理が実行される
  • 上記の場合だと, INC_COUNTER というアクションが来た場合は state に記録されているcountに対して actionに設定されている値を加算する.
  • 同じ store に対して action を送る(dispatch) することで state の中身が書き換わっていく.

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

f:id:namu_r21:20181015184546p:plain

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

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

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

f:id:namu_r21:20181015191104p:plain

Reducerの役割

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

   reducer(state, action) => state 

つまり, reducerstateaction を受け取り, state を返すのだ.

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

   reducer(oldState, action) => newState 

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

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

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

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

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

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

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

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

今回はここまで.