reduxの基礎2 action/reducer

reduxの公式ページのbasic(https://redux.js.org/docs/basics/)のactionとreducerを読んだのでその時のメモ。

Actions


まず最初にactionを定義する。 actionは自分のアプリからstoreにデータを送る役割。

store.dispatch()

で送る。

const ADD_TODO = 'ADD_TODO'
{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

actionはオブジェクトであり、必ず、typeが必要である。 このアクション一つ一つのデータの受け渡しは小さければ小さいほうが良い。

Action Creators


action creatorはその名の通り、actionを作る関数。

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

actionでtypeを設定して、

Reducers


reducerはstoreに送られたactionによってアプリの状態がどう変わったのかを特定する役割。

//actionをimport
import { VisibilityFilters } from './actions'
//最初のstateを定義
const initialState = {
  visibilityFilter: VisibilityFilters.SHOW_ALL,
  todos: []
}
//reducer
function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

ここで注意するのが以下の部分。

Object.assign({}, state, {
        visibilityFilter: action.filter
      })

Object.assign()とは指定したオブジェクトのプロパティをコピーすることができる関数(Object.assign() - JavaScript | MDN)で、第一引数のオブジェクトに第二引数のオブジェクトを追加していくという形。

なので、Object.assign({}, state, {visibilityFilter:action.filter})のようにからのオブジェクトにマージさせる。

reducerを一つにするとたくさんの処理がある時に見づらくなる。 なので親reducer、子reducerのような親子関係を作り、より管理しやすくするのが一般的。

import { combineReducers } from 'redux'

const reducer = combineReducers({
  a: doSomethingWithA,
  b: processB,
  c: c
})

または

function reducer(state = {}, action) {
  return {
    a: doSomethingWithA(state.a, action),
    b: processB(state.b, action),
    c: c(state.c, action)
  }
}

明日はstore,dataくらいまで読もう。