您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　4.5.2 action构造函数

　　确定好状态树的结构之后，接下来就可以写action构造函数了。

　　在todos和filter目录下，我们都要分别创造actionTypes.js和actions.js文件，这两个文件几乎每个功能模块都需要，文件如此命名是大家普遍接受的习惯。

　　在src/todos/actionTypes.js中，我们定义的是todos支持的action类型。在Todo应用中，支持对待办事项的增加、反转和删除三种action类型，代码如下：

　　export const ADD_TODO = 'TODO/ADD';

　　export const TOGGLE_TODO = 'TODO/TOGGLE';

　　export const REMOVE_TODO = 'TODO/REMOVE';

　　和index.js中使用命名式导出而不用默认导出一样，在actionTypes中我们也使用命名式导出，这样，使用actionTypes的文件可以这样写：

　　import {ADD_TODO, TOGGLE_TODO, REMOVE_TODO} from './actionTypes.js';

　　也同样是为了便于debug和输出到log里面查看清晰，所有的action类型的值都是字符串，字符串还有一个好处就是可以直接通过===来比较是否相等，而其他对象使用===则要求必须引用同一个对象。

　　提示

　　严格说来，使用Symbol来代替字符串表示这样的枚举值更合适，但是有的浏览器并不支持Symbol，我们在这里不作深入探讨。

　　考虑到应用可以无限扩展，每个组件也要避免命名冲突。所以，最好是每个组件的action类型字符串值都有一个唯一的前缀。在我们的例子中，所有todos的action类型字符串值都有共同前缀“TODO/”，所有filter的action类型字符串值前缀是“FILTER/”。

　　在src/todos/actions.js中，我们定义todos相关的action构造函数，代码如下：

　　import {ADD_TODO, TOGGLE_TODO} from './actionTypes.js';

　　let nextTodoId = 0;

　　export const addTodo = (text) => ({

　　type: ADD_TODO,

　　completed: false,

　　id: nextTodoId ++,

　　text: text

　　});

　　export const toggleTodo = (id) => ({

　　type: TOGGLE_TODO,

　　id: id

　　});

　　export const removeTodo = (id) => ({

　　type: REMOVE_TODO,

　　id: id

　　});

　　在上一章中我们已经知道，Redux的action构造函数就是创造action对象的函数，返回的action对象中必有一个type字段代表action类型，还可能有其他字段代表这个动作承载的数据。

　　在src/todos/actions.js文件中定义了一个文件级别的变量nextTodoId，每调用一次addTodoaction构造函数就加一，实现为每个产生的待办事项赋予一个唯一id的目的。当然，这种方法非常简陋，我们在后面的章节中会改进唯一id的生成方法。

　　读者可能会注意到我们用了一种新的写法，虽然action构造函数应该是一个返回action对象的方法，我们却看不见return的字样。对于只return一个对象的函数体，ES6允许简写为省去return，直接用圆括号把返回的对象包起来就行，比如上面的toggleTodo对象构造器，实际上是下面方法的简写，代码如下：

　　export const toggleTodo = (id) => {

　　return {

　　type: TOGGLE_TODO,

　　id: id

　　}

　　};

　　用简写毕竟少了两行，如果能够看得习惯，我们何乐而不为。 深入浅出React和Redux