4.5.2 action构造函数
您可以在百度里搜索“深入浅出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