新手容易犯错的地方

就像前面提到那样，Reducer是一个纯函数，在相同的参数的情况下，应该只是计算下一个state并返回它，没有任何副作用，没有任何API调用，没有任何参数操作，只是纯计算逻辑。

在Reducer中，我们不应该操作state。我们应该用Object.assign()来创建一个新的拷贝对象，如下：

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

注意，如果你如下这样写，也是不对的，你实际上是在改变state的，你必须用一个空的对象作为第一个参数。

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

Object.assign有时候会让代码非常的难以阅读，这个时候你可以启用“对象扩展运算符” - { ...state, ...newState }

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

//用Spread操作符代替Object.assign

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

需要在babel中启用transform-object-rest-spread插件：

{
  "presets": ...,
  "plugins": ["transform-object-rest-spread"]
}

注意，当遇到一个未知的action时，应该有一个default的case来返回前一个的state。