首页 > 代码库 > Reflux中文教程——action
Reflux中文教程——action
翻译自github上的reflux项目,链接:https://github.com/reflux/refluxjs/tree/master/docs/actions
一、概览
在Reflux中,actions是store可以监听的函数。action发送一个事件,监听它的store的单例实例就会收到,但调用形式跟函数一样。
二、创建actions
在Reflux中,创建action有多种方式。两种主要方式是Reflux.createAction(创建一个) 和Reflux.createActions(一次性创建多个)。
Reflux.createAction接收一个可选的定义对象作为参数,返回action本身。
Reflux.createActions接受定义对象的数组,返回一个数组,数组中每个元素都可以创建一个action。
Reflux.createActions还有一个简写法,用对象代替数组,它为对象的每一个属性都创建一个action,名字就是属性。
分别举例如下:
var singleAction = Reflux.createAction();
var ManyActions = Reflux.createActions([‘action1‘, ‘action2‘]);
var MoreActions = Reflux.createActions({‘anAction‘:{}});
singleAction();
ManyActions.action1();
MoreActions.anAction();
action创建函数可以接受一个参数,可能是下面这种格式
let myActions = Reflux.createAction({
actionName: "myActionName",//name
children: [‘childAction‘],//子actions的name(),用于异步操作
asyncResult: true,//
sync: false,//设置action是同步还是异步,默认同步,除非有children
preEmit: function(){},
shouldEmit: function(){}
});
这些属性都不是必须的,甚至你可以不带任何参数创建actions,甚至还有设置actionName更简便的方法。
// examples of #1 above
var action = Reflux.createAction(‘myName‘);
var Actions = Reflux.createActions([‘myName1‘, ‘myName2‘]);
// both are equivalent to (respectively):
var action = Reflux.createAction({actionName:‘myName‘});
var Actions = Reflux.createActions([{actionName:‘myName1‘}, {actionName:‘myName2‘}]);
// examples of #2 above
var Actions = Reflux.createActions({‘myName1‘:{sync:false}});
// is equivalent to:
var Actions = Reflux.createActions([{actionName:‘myName1‘, sync:false}]);
异步 VS 同步 actions
actions可以通过myAction()被调用,很简单。但是在内部,如果action的sycn设置为true,action就会执行action.trigger(),不过不是,就执行action.triggerAsycn()。两者的区别在于前者是立即触发,后者在下一个事件循环中触发,可能有能被调用的child action。
action默认都是同步,除非在定义对象中特别指定,或者里面有child action
通过子actions 进行异步加载
通过子actions你可以完成真正的异步actions如文件加载。一个action可以执行一个异步任务,当任务完成时调用子action。最简单的形式如下:
var action = Reflux.createAction({children: [‘delayComplete‘]});
action.listen(function () {
setTimeout(this.delayComplete, 1000);
});
当监听这个actions时可以用this.listenTo(action.delayComplete, onActionDelayComplete). 当调用delayComplete传递的参数会传递给listener的回调函数。这样,比如你在加载文件这样的事情时,就有了函数可以传递文件内容给监听者。
最常见的应用方式就是用createActions 和 简写法(Reflux store 的this.listenable 和this.listenToMany)。store可以自动的给action设置监听函数,以action的名字actionName或者驼峰写法onActionName,子actions也一起也有了监听函数,actionNameChildAction或者onActionNameChildAction。这里是个例子:
var Actions = Reflux.createActions({
‘load‘: {children: [‘completed‘, ‘failed‘]}
});
Actions.load.listen( function() {
someAsyncOperation()
.then( this.completed )
.catch( this.failed );
});
class MyStore extends Reflux.Store {
constructor(props){
super(props);
this.listenables = Actions;
// or
this.listenToMany(Actions);
}
onl oadCompleted(data) {
// use the data here
}
onl oadFailed(message) {
// failed, with whatever message you sent
}
}
三、监听
主要监听方式就是在store中用this.listenTo(action, callbackFunc)或者this.listenables = actions 。但是别忘了,也可以直接监听action或者子action的。
MyActions.actionName.listen(myCallbackFunc);//直接监听
MyActions.load.completed.listen(myCallbackFunc);//监听子action
四、移除监听
创建监听时,会返回一个取消监听的函数,调用这个函数就可以了。
var unsubscribe = myActions.actionName.listen(myCallbackFunc);
unsubscribe();
五、Action Hooks
有几个钩子函数
preEmit:在actions触发事件前调用。它从调用action的地方接受一个参数。如过preEmit有返回,返回值就会作为shouldEmit的参数,追加进原有的参数中。
shouldEmit:在preEmit后,action触发事件前调用。默认返回true,会让action正常触发event。如果你需要检查action接收的参数,你可以重写这个函数,看是否需要触发event。
Actions.statusUpdate.preEmit = function(){ console.log(arguments)};
Actions.statusUpdate.shouldEmit = function(value){
return value > 0;
}
Actions.statusUpdate(0);
也可以在定义action的时候就将这两个函数传进去
var actions = Reflux.createAction({
preEmit: function(){},
shouldEmit: function(){}
});
六、Reflux.ActionMethods
如果你有一些方法希望所有的action都能用,你可以扩展Reflux.ActionMethods对象,在action创建时,就会被掺进去
Reflux.ActionMethods.exampleMethod = function(){console.log(arguments)};
Actions.statusUpdate.exampleMethod(‘arg1‘);
//should output: ‘arg1‘
Reflux中文教程——action