关于redux的Action和Reducers的问题？

Question

actions.js

/*
 * action 类型
 */

export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

/*
 * 其它的常量
 */

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

/*
 * action 创建函数
 */

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

export function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

export function setVisibilityFilter(filter) {
  return { type: SET_VISIBILITY_FILTER, filter }
}

为什么export const ADD_TODO还要export function addTodo

无法理解

Reducers

import { VisibilityFilters, ADD_TODO, TOGGLE_TODO } from './actions'

...

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
  }
}

visibilityFilter: action.filter 这句是返回visibilityFilter中的参数吗？

todos: [
    ...state.todos,
    {
        text: action.text,
        completed: false
    }
]

这个怎么理解？...state.todos 这个是什么意思？

{
    text: action.text,
    completed: false
}

这个是干嘛用的？

Answer 1

建议你先去了解下 es6再来学习

• export const ADD_TODO是为了后面在 reducer中可以匹配到对应到 type 而 export function addTodo 是暴露出这个方法，其他地方可以调用这个方法去触发这个 action
• Object.assign({}, state, { visibilityFilter: action.filter }) 是潜拷贝了state然后重写了 visibilityFilter 这个 key 的值
• [...state.todos] 是数组的 rest 运算

Answer 2

为什么export const ADD_TODO还要export function addTodo？

解答：问这个问题说明你还没有搞清redux的工作原理。我们拿银行来做类比，首先银行会有有一个专门的地方存放，而这个存钱的地方就是redux的store。我们现实生活中要存钱或者取钱，肯定不能让你直接去存钱的地方拿钱吧！你得提交申请，银行审核通过之后，银行柜台才能帮你存钱或者取钱吧。这里对应redux就是，你想修改或者读取store的数据，你是不能直接操作store的，你得发起一个申请，这个申请就是action。发出申请之后，得有人来审核，那这个人就是reducer。他会判断你要做类型的事情，比如存钱还是取钱，然后再帮你去store进行相应的操作。知道原理之后，我们来理一下这个两个东西是干嘛的。ADD_TODO在这里就相当于业务类型，为什么要暴露出来，你的addTodo这个申请对应的业务类型就是ADD_TODO，你不暴露给reducer，reducer怎么判断要进行什么操作？

visibilityFilter: action.filter 这句是返回visibilityFilter中的参数吗？

解答：这一看你就对Object.assign这个es6语法不熟悉，建议去学习一下。比如银行里面很多账户，每个账户里面都有对应的钱，比如这个取完钱之后，这个人对应账户的上面不就是少掉相应的钱。对应store也是这个道理，这里直接去改state的值。原因很简单，因为他不允许直接修改其中的某个值，所以你得把这个state整体替换成计算之后新的state。Object.assign这个方法就是根据老的state和要修改的地方合成新的state。

...state.todos 这个是什么意思？

解答：还是对es6的语法不了解。...是一个扩展运算符，后面跟数组。上面用es5翻译一下就是，state.todos.concat({ text: action.text,completed: false}).举个栗子就是：
[...[1,2,3],4]等价于[1,2,3].concat(4)