Redux StateをAction駆動で変化させるReducerの仕組み
Redux
Reduxに関してはこちらがおすすめ. わかりやすい.
Reduxはイベントドリブンに似ている
状態をイベントドリブンで変化させる仕組みだと思えば良い.
関心ごとはひたすらに State
を誰にどのように操作させるか である.
では見ていこう.
Redux の大まかなイメージ
自分はReduxを勉強していて川と魚と釣り人の関係を思い浮かべた.
川に魚が泳いでいる. そしてそれを釣り上げる釣り人がいる.
川には魚が流れ続けている.
魚がEvent, その魚に対応して釣り人(関数)が魚を釣る.
Eventに対応して関数が動く. そんなイメージである.
イベントドリブンなアプリケーションは大体こんなイメージだと思う.
Reduxをシンプルに表したコードを読んで見る
こちらからコードを参照.
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
しか受け付けない.
これによって, 状態変化のフローを一方向に制約している.
なるほど,そんな仕組みだったんだね.
今回はここまで.