Redux：动作 Actions

动作（Actions）。在 Redux 的动作里会带着发送给 Store 的信息，动作是 Store 的唯一信息来源，可以使用 store.dispatch() 把动作发送给 Store。

下面就是一个动作，这个动作表示的是添加新的任务项目（假设这个动作来自一个任务列表应用）：

const ADD_TODO = 'ADD_TODO'

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

动作其实就是一个 JavaScript 对象，它里面必须得有个 type 属性，这个属性表示的是要执行的动作的类型，也就是在你的应用里会发生的一些事情。一般这个类型的值是一个字符串恒量，但这并不是必须的，你可以直接使用一个普通的字符串表示动作，但是对于大型应用来说，让动作的名字使用恒量是有好处的。在动作对象里，除了必须的 type 属性以外，你可以在这个对象里放任何东西。你可以参考 Flux Standard Action ，学习动作的结构。

你可以把动作放到单独的模块里：

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

下面这个动作描述了用户切换一个任务项目的完成状态，在这个动作里 index 的值表示的是某个具体的任务项目。

{
  type: TOGGLE_TODO,
  index: 5
}

动作里包含的数据越少越好，比如上面这个动作只是传递了表示任务项目的 index，而不是整个任务项目（todo）对象。

下面这个类型的动作，描述的是改变当前可见的任务项目：

{
  type: SET_VISIBILITY_FILTER,
  filter: SHOW_COMPLETED
}

Action Creators

Action creators （动作创建器）就是创建动作用的函数。

在 Redux 里面，Action creators 会返回动作：

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

调度动作，可以把 Action creator 返回的结果交给 dispatch() 函数，像这样：

dispatch(addTodo(text))
dispatch(completeTodo(index))

另外，你也可以创建一个 bound action creator （绑定动作创建器），它可以自动调度：

const boundAddTodo = (text) => dispatch(addTodo(text))
const boundCompleteTodo = (index) => dispatch(completeTodo(index))

现在你可以直接调用它们：

boundAddTodo(text)
boundCompleteTodo(index)

dispatch() 函数可以直接在 store.dispatch 访问到。但大部分情况下你会用到一些帮手方法，比如 react-redux 的 connect() 。你可以使用 bindActionCreators() 来自动绑定多个动作创建器到 dispatch() 函数上。

Source Code

actions.js

/*
 * action types
 */

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

/*
 * other constants
 */

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

/*
 * action creators
 */

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