Redux总结2：action

Action
看一下定义：Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的唯一来源。

首先要明白的是，action仅仅是一个普通的对象，用法跟其他的对象没什么区别。唯一的特别之处是action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。

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

也可以写成下面这样：

{
  type: 'ADD_TODO',
  payload: {
    id: 1,
    content: '待办事项1',
    completed: false
  }
}

除了 type 字段外，action 对象的结构完全由你自己决定。可以看一下这些规范

多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放 action。

import { ADD_TODO, REMOVE_TODO } from '../actionTypes'

使用单独的模块或文件来定义 action type 常量并不是必须的，甚至根本不需要定义。对于小应用来说，使用字符串做 action type 更方便些。不过，在大型应用中把它们显式地定义成常量还是利大于弊的。

Action创造函数
顾名思义Action创造函数 是 action 的创造者，本质上就是一个函数，返回值是一个 action（对象）。

例如下面就是一个 “新增一个待办事项” 的 Action创造函数：

var id = 1
function addTodo(content) {
  return {
    type: 'ADD_TODO',
    payload: {
      id: id++,
      content: content, // 待办事项内容
      completed: false  // 是否完成的标识
    }
  }
}

将该函数应用到一个表单（假设 store 为全局变量，并引入了 jQuery ）：

<input type="text" id="todoInput" />
<button id="btn">提交</button>

<script>
$('#btn').on('click', function() {
  var content = $('#todoInput').val() // 获取输入框的值
  var action = addTodo(content) // 执行 Action Creator 获得 action
  store.dispatch(action) // 改变 state 的不二法门：dispatch 一个 action！！！
})
</script>

在输入框中输入 “待办事项2” 后，点击一下提交按钮，我们的 state 就变成了：

{
  counter: 0,
  todos: [{
    id: 1,
    content: '待办事项1',
    completed: false
  }, {
    id: 2,
    content: '待办事项2',
    completed: false
  }]
}

由此可以看出：Action创造函数 用于绑定到用户的操作（点击按钮等），其返回值 action 用于之后的 dispatch(action)

为什么 store.dispatch(action) 之后，Redux 会明确知道是提取 action.payload，并且是对应写入到 state.todos 数组中？又是谁负责“写入”的呢？是Reducer.