如果我们的react项目中使用了redux,那都会进行如下操作;
// 在actionType目录下建一个 action.type
export const HELLO_WORLD = 'HELLO_WORLD';
// 在某个action目录下引入这个action.type,并写一个action
import { HELLO_WORLD } from './actionType';
export const sayHelloWorld = () => {
return {
type:HELLO_WORLD
}
}
// 再在准备调用 这个action的地方(比如某组件)引入 sayHelloWorld 这个action
import { sayHelloWorld } from './action';
dispatch(sayHelloWorld());// 噼里啪啦进行操作起来!
这样写没任何问题,关键是,如果项目比较复杂,定义的actionType 会非常多,对应的action也会非常多,如果按照上面那样写的话,很容易让人产生报复社会的赶脚
下图就是一个很典型的引入actionType的图片:
但是,我们利用ES6的import 的小技巧,把图片的代码简写成一小行:
import * as types from './actionType';
这样我们在使用每个actionType的时候,只需要在前面加个types.即可。比如我们要引用图片里面的第一个“HOMEWORK_READ_REQUEST”,就可以写成
types.HOMEWORK_READ_REQUEST
同理,引用action的地方可以写成:
import * as actions from './action';
这样写完是不是感觉浑身舒坦!!
提高不少我们的开发速度,更加专注于业务逻辑!
更加详细的文档,可以参考 阮一峰 ES6 入门