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 }); |
combineReducersとは？
ReduxのReducerは関心ごとごとに分割し、Reducerごとに別々の名前空間で処理が実行させることができるイメージ。
それらのReducerを統合する。
combineReducersがやっていること
- 各reducerを呼び出して初期状態を取り出す。
- 初期状態をまとめて初期状態ツリーを作る。
- reducerの処理をまとめたcombination関数を返す。
combination関数
reducer名をキーにした状態ツリーからそのreducerの部分状態を取り出して渡す。
注意点
combineReducerを使ったからと言って、Reducer間のデータ共有ができるわけではない。
Action
実装方法
Storeに変化を加えるための具体的な関数群などは一箇所で指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
export function a(test) { return { type: 'A', test } } export function b(test) { return { type: 'B', test } } |
Action Creator
アクションを返している関数を「Action Creator」と呼びます。アクションを作るためのロジックを記述します。
コンポーネント側で利用するのでexportして使うのが普通です。
|
1 2 3 |
export function a(test) { return Action } |
redux-thunk
もし、Action Creator内で非同期な処理を記述したい場合はこれを使います。
Action
「Action Creator」で返されているオブジェクトです。具体的には以下の部分ですね。
|
1 2 3 4 |
{ type: 'A', test } |
type
指定は必須です。Reducer側でどのActionかどうか判定するために使用します。
この記事へのコメントはありません。