Redux:Reducers

action只是描述了“发生了什么事情（导致state需要更新）”，但并不直接参与更新state的操作。state的更新由reducer函数执行。

其基本模式是：（state，action）=> newState

设计组件state的结构：

    在开始敲代码之前，我们要先设计好组件state的结构。我们得先明确state需要哪些变量，哪些是纯粹的数据，哪些和UI有关。用合适的结构组织起来（data类的state和UI类的state最好相互独立）。

In a more complex app, you're going to want different entities to reference each other. We suggest that you keep your state as normalized as possible, without any nesting. Keep every entity in an object stored with an ID as a key, and use IDs to reference it from other entities, or lists. Think of the app's state as a database.

如何处理action：

往reducer函数传入参数之后，根据action的type属性，函数执行对应的对state的更新。文档指出三件在reducer函数中必须避免的事情：

1.改变传入的参数。

2.执行“引发其他作用“的操作，比如调用其他api、路由跳转

3.调用”无更新无关“的函数，如Date.now()

For now, just remember that the reducer must be pure. Given the same arguments, it should calculate the next state and return it. No surprises. No side effects. No API calls. No mutations. Just a calculation.

使用

初始化state：

在第一次调用reducer的时候，传入的state回事一个undefined，此时我们可以给它进行初始化。

import { VisibilityFilters } from './actions'

const initialState = {
  visibilityFilter: VisibilityFilters.SHOW_ALL,
  todos: []
}

function todoApp(state, action) {
  if (typeof state === 'undefined') {
    return initialState
  }

  // For now, don't handle any actions
  // and just return the state given to us.
  return state
}

我们可以借助ES6的参数默认值简化代码：

function todoApp(state = initialState, action) {
  // For now, don't handle any actions
  // and just return the state given to us.
  return state
}

最终的reducer可以是这样：

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case ADD_TODO:
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    default:
      return state
  }
}

记住几个地方：

*只要符合switch语句的某个case，返回的state是一个新的对象。

*匹配不到case的，default返回的是原先的state。任何意外的action都不触发state更新，可控才是最重要的。

*Object.assign是ES6的api，许多浏览器可能并不原生支持，开发时记得安装插件 Babel plugin。另，assign第一个参数必须是空对象；也可以用 对象扩展运算符{...state,...update}。

*switch语句不是必须的，reducer内部的结构完全由自己设计

分解（解构）Reducer：

当我们的state涉及很多变量的时候，像上面那样写在同一个函数中难免会显得又长又臭。

作者给出的优化方法是，在Reducer中直接返回一个新的字面量的state。但是这个state各个属性的值是一个reducer(state.key,action)的返回值。

也就是说，返回的state的各个属性，都经过一个reducer的处理，如果该属性的值需要更新。则内部返回一个新属性值。如果该属性不需要更新，则内部返回原来的属性值。

最后store获得的是响应了action的更新了的state。

看下面的例子：

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case TOGGLE_TODO:
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: !todo.completed
          })
        }
        return todo
      })
    default:
      return state
  }
}

function visibilityFilter(state = SHOW_ALL, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return action.filter
    default:
      return state
  }
}

function todoApp(state = {}, action) {
  return {
    visibilityFilter: visibilityFilter(state.visibilityFilter, action),
    todos: todos(state.todos, action)
  }
}

这段代码结构很清晰，todos函数负责管理事件的添加和‘是否完成’的标记，visibilityFilter负责列表的显示规则，顶层Reducer返回的state的各个属性的值都是一个reducer的返回值。由于内部reducer的函数名和state的属性名一致，所以可以用对象属性简写的方式：return { visibilityFilter,todos};

要留意：

内部reducer单元中，参数state都有默认值，因为每个reducer分别更新state的不同属性，因此他们得到的state参数其实是state的一部分属性，他们返回的值也是新state的一部分。

顶层Reducer才是返回新state的地方。

另外，Redux提供了一个工具 combineReducers()来帮助我们实现上面这种分解reducer功能的逻辑：

import { combineReducers } from 'redux'

const todoApp = combineReducers({
  visibilityFilter,
  todos
})

export default todoApp

等价于

export default function todoApp(state = {}, action) {
  return {
    visibilityFilter: visibilityFilter(state.visibilityFilter, action),
    todos: todos(state.todos, action)
  }
}

就是一个生成Reducer的工具。