🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## action 定义: Action 是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 `store` 的有效载荷。它是 `store` 数据的唯一来源。一般来说你会通过 `store.dispatch()` 将 `action` 传到 `store`。 添加新的todo任务的`action`是这样的: ~~~ // 动作的常量名字 const ADD_TODO = 'ADD_TODO' // 一个Action 对象 { type: ADD_TODO, // 对应常量名字 text: 'Build my first Redux App' // 除了 type 字段外,action 对象的结构完全由你自己决定。 } ~~~ 上面是一个Action对象,描述动作的对象,还有一个概念叫Action创建函数,两者不同,别混淆。 先来写`action`创建函数。通过`action`创建函数,就可以创建一个`action`~ `src/redux/actions/counter.js` ~~~ /* action */ export const INCREMENT = "counter/INCREMENT" // 只要保证reducer判断和这里定义的保持一致就可以。 export const DECREMENT = "counter/DECREMENT" // 这里可以随便定义。 export const RESET = "counter/RESET" // 例如 a / b / c export const ADD_TODO = "ADD_TODO" export function increment() { // 创建一个Action(下同),除了 type 字段外,action 对象的结构完全由你自己决定。 return { type: INCREMENT } } export function decrement() { return { type: DECREMENT } } export function reset() { return { type: RESET } } export function addTodo(text) { return { type: ADD_TODO, text } } ~~~ 通常在[传统的 Flux](http://facebook.github.io/flux)开发中,在调用`action`创建函数时,需要手动触发一个`dispatch`,像这样: ~~~ function addTodoWithDispatch(text) { const action = { type: ADD_TODO, text } dispatch(action) } ~~~ 不同的是,Redux 中只需把 `action` 创建函数返回的`action`对象传给 `dispatch()` 方法即可发起一次 `dispatch` 过程: ~~~ dispatch(increment()) dispatch(addTodo(text)) ~~~ 或者创建一个 被绑定的 action 创建函数 来自动 dispatch: ~~~ const boundIncrement = () => dispatch(increment()) const boundAddTodo = text => dispatch(addTodo(text)) // 然后需要调用它们: boundIncrement() boundAddTodo(text) ~~~