react 事始め 9

React

◾️Reducer

Actionが発生した時に、そのActionに組み込まれているtypeに応じて状態stateをどう変化させるのかということを定義する。

srcのディレクトリーに、reducersを作成し、その中にindex.js、count.jsを作成する。 index.jsは、アプリケーション内に存在する全てのreducerを結合する役割を担う。combineReducersがreducerを結合するための関数。count処理する状態をもつcountというreducerをインポート。この後の結合したものをインポートしてstoreを作成する際に使用するので、exportしておく。

src/reducers/index.js

import { combineReducers } from 'redux'
import count from './count'

export default combineReducers({ count })

次に、countというreducerを実装する。Actionのtypeをインポートし、状態の初期値、countのreducerを定義する。actionのtypeに応じて値を変更して結果をreturnで返す。

src/reducers/count.js

import { INCREMENT, DECREMENT } from '../actions'

const initialState = { value: 0 }

export default (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { value: state.value + 1 }
    case DECREMENT:
      return { value: state.value - 1 }
    default:
      return state   
  }
}