Reflux之Action

reflux在flux的基础上,去掉了dispatcher.
在Reflux中,每一个Action本身就是一个Publisher(消息发布者),具有消息发布功能;而每一个Store除了作为数据存储之外,它还是一个Subscriber,或者叫做Listener(消息订阅者),可以通过监听Action,来获取到变化的数据。
const Reflux = require('reflux');
const action = Reflux.createAction();
action.listen(data => console.log('data1 is ', data));
action.listen(data => console.log('data2 is ', data));
// 同步触发
action.trigger('sync');
// 异步触发
// setTimeout(() => {
// action.trigger('async')
// }, 0);
action.triggerAsync('async2')
console.log('-----end-----');

Reflux hooks
const Reflux = require('reflux');
const action = Reflux.createAction({
preEmit(data) {
return {
name: data
}
},
shouldEmit() {
// 若为false,则不会触发
return true;
}
})
action.listen(data => console.log(data));
action.trigger('flower');

异步串联 asyncResult
const Reflux = require('reflux');
const action = Reflux.createAction({asyncResult: true, children:['clickme']});
action.completed.listen(function() {
console.log('complete');
})
action.clickme.listen(function() {
console.log('click me');
action.completed();
});
action.listen(function(data) {
console.log(data);
action.clickme();
});
action.trigger('hello')

createActions
const Reflux = require('reflux');
const actions = Reflux.createActions(['action1', 'action2']);
actions.action1.listen(data => console.log('in action1, ', data));
actions.action2.listen(data => console.log('in action2, ', data));
actions.action1.listen(data => console.log('in action1, ', data));
actions.action1.trigger('heel');
actions.action2.triggerAsync('mount');

action1.listen对应action1.trigger, action2.listen对应action2.triggerAsync.
Reflux之Action的更多相关文章
- react 之 reflux 填坑
注意:老铁些,在看这篇文章的之前,最好了解一下react 的全局状态管理库哦,不然可能会坐飞机. ^_^ React 之reflux (它是一个功能模块,需要安装引入): import Reflux ...
- Reflux之Store
Reflux中的Store既是一个listener(既有对action的监听,又有对store的监听)同时又是一个publisher. 一.监听单个action const Reflux = requ ...
- react+reflux入门教程
为了简化react的flux带来的冗余操作,社区的同仁们给我们带来了很多优秀的轮子,诸如redux,reflux等.今天我们就通过逐行讲解代码实例的方法,感受一番reflux的设计之美. 例子 这个例 ...
- 【原创】ReFlux细说
ReFlux细说 Flux作为一种应用架构(application architecture)或是设计模式(pattern),阐述的是单向数据流(a unidirectional data flow) ...
- React + Reflux
React + Reflux 渲染性能优化原理 作者:ManfredHu 链接:http://www.manfredhu.com/2016/11/08/23-reactRenderingPrinc ...
- Reflux 使用教程
Reflux是根据React的flux创建的单向数据流类库.Reflux的单向数据流模式主要由actions和stores组成.例如,当组件list新增item时,会调用actions的某个方法(如a ...
- Reflux中文教程——概览
翻译自github上的reflux项目,链接:https://github.com/reflux/refluxjs 〇.安装及引入 安装: npm install reflux 引入: var Ref ...
- Reflux系列01:异步操作经验小结
写在前面 在实际项目中,应用往往充斥着大量的异步操作,如ajax请求,定时器等.一旦应用涉及异步操作,代码便会变得复杂起来.在flux体系中,让人困惑的往往有几点: 异步操作应该在actions还是s ...
- React + Reflux 渲染性能优化原理
作者:ManfredHu 链接:http://www.manfredhu.com/2016/11/08/23-reactRenderingPrinciple 声明:版权所有,转载请保留本段信息,否则请 ...
随机推荐
- Python爬虫入门(基础实战)—— 模拟登录知乎
模拟登录知乎 这几天在研究模拟登录, 以知乎 - 与世界分享你的知识.经验和见解为例.实现过程遇到不少疑问,借鉴了知乎xchaoinfo的代码,万分感激! 知乎登录分为邮箱登录和手机登录两种方式,通过 ...
- 在同一个服务器上同时配置xxxxxxxxxx1个tomcat
下面我们把配置的详细过程写在下面,以供参考:(此例以配置三个Tomcat为例) 下载apache-tomcat-7.0.63,下载下来的文件为apache-tomcat-7.0.63.zip. 解压该 ...
- 前端基础-HTML(2)
1. 什么是标签以及标签的分类: 在HTML页面中,带有“< >”符号的元素被称为HTML标签,如上节提到的 <HTML>.<head>.<body>都 ...
- 数组的forEach和map和for方法的区别
一.定义 foreach(): 从头到尾遍历数组,为每个元素调用指定的函数. map(): 将调用的数组的每个元素传递给指定的函数,并返回一个数组,他包含该函数的返回值. 传递的函数是 forea ...
- python学习20之面向对象编程高级
'''''''''1.动态绑定:对于一个类,我们可以对它的实例动态绑定新的属性或方法.为了使所有的实例均可以使用动态绑定的属性和方法,我们也可以采用对类直接动态绑定'''class Student() ...
- (第七篇)系统编码、自启动配置、HOSTNAME、系统启动、定时任务、进程管理、硬盘及其分区
linux查看系统编码和修改系统编码的方法 查看支持的字符编码 使用locale命令, 如: root@ubuntu:/etc# locale 然后修改/etc/locale.conf,如改成中文编码 ...
- RabbitMQ Hello world(二)
简介: Rabbitmq 是消息代理中间件,它接收或者发送消息.你可以把它想想宬一个邮局:当你把邮件放到邮箱时,你可以确定某一位邮递员可以准确的把邮件送到收件人手中,在这个比喻中,rabbitmq是一 ...
- zabbix管理,添加监控主机
一:添加本机为监控主机 二.监控其他Linux主机agent端 1.环境部署 [root@localhost ~]# hostname agent.zabbix.com[root@localhost ...
- 【linux三剑客】grep命令
grep, egrep, fgrep - print lines matching a pattern grep 命令用于查找文件里符合条件的字符串. grep 指令用于查找内容包含指定的范本样式的文 ...
- MyBaties一级缓存
2019独角兽企业重金招聘Python工程师标准>>> 一.一级缓存简介 在系统代码的运行中,我们可能会在一个数据库会话中,执行多次查询条件完全相同的Sql,鉴于日常应用的大部分场景 ...