理解reflux中的事件结合

reflux是一个flux的实现框架,但又在部分概念和实现上与flux的产生了分歧。分歧点主要是为了:javascript

  1. 简化Flux的编码量,让机器完成那些重复的体力活。
  2. 迈向Reactive Programming,而不是Imperative Programming.

一个重要的分歧点是reflux中取消了flux中的waitFor的概念,取而代之的是:java

  1. store之间能够相互监听。当一个Store完成数据获取后,trigger出来的数据会传递到另外一个store,产生连锁反应。
  2. store监听的actions能够聚合,这是在flux中没有的。

如下着重谈谈事件的聚合。docker

reflux主要提供了四个函数:框架

  • joinLeading: 只响应第一次emit出来的,在完成一次trigger前,剩下的emission无论了。
  • joinTrailing: 在一次trigger前,无视最后一次emission出来的数据。
  • joinConcat: 在一次trigger前,保存全部emission的数据。
  • joinStrict: 若是在一次trigger以前屡次emit,抛异常。

上次的说法仍是挺抽象的,具体到例子:函数

javascriptvar reflux = require('reflux');

var actions = reflux.createActions([
  'hello',
  'greet',
  'say'
  ]);

var store = reflux.createStore({
  init: function () {
    this.joinTrailing(actions.hello, actions.greet, actions.say, this.trigger);
  }
});

store.listen(function() {
  console.log('triggering with', arguments);
});


actions.hello('bubu');
actions.greet('chacha');
actions.say('dockers');
actions.hello(1,2,3);
actions.greet('miku');
actions.say('dockers');

结果:
triggering with { '0': [ 'bubu' ], '1': [ 'chacha' ], '2': [ 'dockers' ] }
triggering with { '0': [ 1, 2, 3 ], '1': [ 'miku' ], '2': [ 'dockers' ] }

上面例子表示,store监听一系列action的集合,只有每一个Action都触发了,才会最后触发store上注册的回调函数。ui

joinTrailing的意义在何处呢?若是把上面的action触发顺序换成下面:this


actions.hello('bubu'); actions.hello(1,2,3); actions.greet('chacha'); actions.say('dockers'); actions.greet('miku'); actions.say('dockers'); 结果: triggering with { '0': [ 1, 2, 3 ], '1': [ 'chacha' ], '2': [ 'dockers' ] }

会发现bubu已经被无视了,且因为剩下的greetsay没法完整地构成事件组合,故没有触发回调。编码

对于joinConcat可得:code

javascriptactions.hello('bubu');
actions.hello(1,2,3);
actions.greet('chacha');
actions.say('dockers');
actions.greet('miku');
actions.say('dockers');

结果:

triggering with { '0': [ [ 'bubu' ], [ 1, 2, 3 ] ],
  '1': [ [ 'chacha' ] ],
  '2': [ [ 'dockers' ] ] }

joinLeadingjoinStrict就不举例了。flux

相关文章
相关标签/搜索