Reducerとは？
Storeに変化を加えるために必要なReduxの要素です。stateとactionの二つの引数を受け取ります。
Reducerの作成手順
1.reduxライブラリからcombineReducersをインポートする。
|
1 |
import { combineReducers } from 'redux'; |
複数のReducerのモジュールを一つにまとめて一括で状態管理できるようにするための関数です。
2.個別のReducerを宣言する。
ReduxではStoreに変化を加える方法を事前にReducerのActionのタイプとして宣言しておき、極めて限定させるように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
const initialState = { value: 0 } export function test(state=initialState, action){ switch(action.type) { case "A": return state + 1; case "B": return state + 2; default: return state; } } |
test
Reducer名になります。
state = initialState
Reducer(上記サンプルで言えば「test」)の構造です。Reducer初期値を設定します。Storeの中にtestというオブジェクトがありそのプロパティ としてvalueという値を持っていると読み取ることが可能です。
action
Storeに変化を加えるためのDispatchされたActionです。サンプルではAとかBとか書いていますが、例えばTODOリストへの追加アクションだったり、削除アクションだったりが想定されるでしょう。
caseでの各処理
基本的に空のオブジェクトを用意しておいてそれをコピーしてコピーに変更を反映して返します。（こうするために純粋関数と呼ばれる。）
なお、Reducerに定義されていないActionが指定された場合はstateをそのまま返すように実装することが一般的であり何も起こしません。
3.combineReducersで複数のReducerを組み合わせて1つのReducerにまとる。
以下のように記述します。
|
1 2 3 |
export default combineReducers({ test }); |
この記事へのコメントはありません。