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的更多相关文章

  1. react 之 reflux 填坑

    注意:老铁些,在看这篇文章的之前,最好了解一下react 的全局状态管理库哦,不然可能会坐飞机. ^_^ React 之reflux (它是一个功能模块,需要安装引入): import Reflux ...

  2. Reflux之Store

    Reflux中的Store既是一个listener(既有对action的监听,又有对store的监听)同时又是一个publisher. 一.监听单个action const Reflux = requ ...

  3. react+reflux入门教程

    为了简化react的flux带来的冗余操作,社区的同仁们给我们带来了很多优秀的轮子,诸如redux,reflux等.今天我们就通过逐行讲解代码实例的方法,感受一番reflux的设计之美. 例子 这个例 ...

  4. 【原创】ReFlux细说

    ReFlux细说 Flux作为一种应用架构(application architecture)或是设计模式(pattern),阐述的是单向数据流(a unidirectional data flow) ...

  5. React + Reflux

    React + Reflux 渲染性能优化原理   作者:ManfredHu 链接:http://www.manfredhu.com/2016/11/08/23-reactRenderingPrinc ...

  6. Reflux 使用教程

    Reflux是根据React的flux创建的单向数据流类库.Reflux的单向数据流模式主要由actions和stores组成.例如,当组件list新增item时,会调用actions的某个方法(如a ...

  7. Reflux中文教程——概览

    翻译自github上的reflux项目,链接:https://github.com/reflux/refluxjs 〇.安装及引入 安装: npm install reflux 引入: var Ref ...

  8. Reflux系列01:异步操作经验小结

    写在前面 在实际项目中,应用往往充斥着大量的异步操作,如ajax请求,定时器等.一旦应用涉及异步操作,代码便会变得复杂起来.在flux体系中,让人困惑的往往有几点: 异步操作应该在actions还是s ...

  9. React + Reflux 渲染性能优化原理

    作者:ManfredHu 链接:http://www.manfredhu.com/2016/11/08/23-reactRenderingPrinciple 声明:版权所有,转载请保留本段信息,否则请 ...

随机推荐

  1. 数据结构(C语言版)---排序

    1.排序:重排表中元素. 2.根据数据元素是否完全在内存中,将排序算法分为内部排序和外部排序两类. 3.插入排序:将一个待排序记录按关键字大小插入到前面已排好的子序列中,直到全部记录插入完成. 1)直 ...

  2. Js实现将html页面或div生成图片

    参考:https://blog.csdn.net/huwei2003/article/details/79761580 今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2 ...

  3. 关于小程序中textarea内的字体浮动问题

    因为map.canvas.video.textarea 是由客户端创建的原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 原生组件暂时还无 ...

  4. SESSION劫持

    服务端和客户端之间是通过session(会话)来连接沟通.当客户端的浏览器连接到服务器后,服务器就会建立一个该用户的session.每个用户的session都是独立的,并且由服务器来维护.每个用户的s ...

  5. 二进制安装MySQL及破解密码

    二进制安装MySQL及破解密码 1.确保系统中有依赖的libaio 软件,如果没有: yum -y install libaio 2.解压二进制MySQL软件包 tar xf mysql-5.7.24 ...

  6. Redis数据迁移的三个方法

    为什么80%的码农都做不了架构师?>>>   1. rdb数据备份恢复方法 redis 127.0.0.1:6379> SAVE OK 或者 redis-cli -h 127. ...

  7. 你的GitHub,怎么和我用的不太一样?

    说起代码托管,相信绝大多数人脑海中浮现出的第一个词都是"GitHub".经过多年的发展,GitHub俨然已经成为了代码托管领域的标签- 随着国内互联网环境的优化,互联网产业链的不断 ...

  8. TCP 3-Way Handshake

    TCP是面向连接的协议,其数据传输过程分为建立连接.数据传送.释放连接三个阶段. 0 建立连接 建立连接的过程也就是常说的"三次握手": 客户端向服务器端发送一个SYN报文(SYN ...

  9. 使用npm发布插件

    使用npm发布插件 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 npm是一个全球性的包管理工具,上面有着许许多多的前端 ...

  10. Codeforces Round #626 D. Present

    D. Present 题目大意:给你一个大小是n的序列,求两两之间相加进行异或之后的答案. 这个题目我并没有想到怎么写,有点偷懒于是就去看了题解.. 题解很套路... 题解: 因为这个是用到了异或,所 ...