Redux Action定义

发布时间：2023-04-06 14:04:30 所属栏目：教程来源：

导读：Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据）传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch()

Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据）传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

添加新 todo 任务的 action 是这样的：

const ADD_Todo = 'ADD_Todo'
{
type: ADD_Todo,
text: 'Build my first Redux app'
}
Action 本质上是 JavaScript 普通对象。我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放 action。

import { ADD_Todo, REMOVE_Todo } from '../actionTypes'
样板文件使用提醒
使用单独的模块或文件来定义 action type 常量并不是必须的，甚至根本不需要定义。对于小应用来说，使用字符串做 action type 更方便些。不过，在大型应用中把它们显式地定义成常量还是利大于弊的。参照减少样板代码获取更多保持代码简洁的实践经验。

除了 type 字段外，action 对象的结构完全由你自己决定。参照 Flux 标准 Action 获取关于如何构造 action 的建议。

这时，我们还需要再添加一个 action index 来表示用户完成任务的动作序列号。因为数据是存放在数组中的，所以我们通过下标 index 来引用特定的任务。而实际项目中一般会在新建数据的时候生成唯一的 ID 作为数据的引用标识。

{
type: TOGGLE_Todo,
index: 5
}
我们应该尽量减少在 action 中传递的数据。比如上面的例子，传递 index 就比把整个任务对象传过去要好。

最后，再添加一个 action type 来表示当前的任务展示选项。

{
type: SET_VISIBILITY_FILTER,
filter: SHOW_COMPLETED
}
Action 创建函数
Action 创建函数就是生成 action 的方法。“action” 和 “action 创建函数” 这两个概念很容易混在一起，使用时最好注意区分。

在 Redux 中的 action 创建函数只是简单的返回一个 action:

function addTodo(text) {
return {
type: ADD_Todo,
text
}
}
这样做将使 action 创建函数更容易被移植和测试。

在传统的 Flux 实现中，当调用 action 创建函数时，一般会触发一个 dispatch，像这样：

function addTodoWithdispatch(text) {
const action = {
type: ADD_Todo,
text
}
dispatch(action)
}
不同的是，Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。

dispatch(addTodo(text))dispatch(completetodo(index))
或者创建一个被绑定的 action 创建函数来自动 dispatch：

const boundAddTodo = text => dispatch(addTodo(text))
const boundCompletetodo = index => dispatch(completetodo(index))
然后直接调用它们：

boundAddTodo(text);
boundCompletetodo(index);
store 里能直接通过 store.dispatch() 调用 dispatch() 方法，但是多数情况下你会使用 react-redux 提供的 connect() 帮助器来调用。

bindActionCreators() 可以自动把多个 action 创建函数绑定到 dispatch() 方法上。

Action 创建函数也可以是异步非纯函数。你可以通过阅读高级教程中的异步 action章节，学习如何处理 AJAX 响应和如何把 action 创建函数组合进异步控制流。

因为基础教程中包含了阅读高级教程和异步 action 章节所需要的一些重要基础概念, 所以请在移步异步 action 之前, 务必先完成基础教程。

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!