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. Hbase详细架构图解

    @ 目录 主要组件 数据模型 注意:Hbase是依赖zookeeper和hdfs的,需要启动zk和hdfs. 主要组件 Zookeeper: HBase 通过 Zookeeper 来做 Master ...

  2. sqlilab11-14

    less11 抓包 ' " 实验发现'构成闭合,存在注入点 less-12 a,b都有注入点,b比较好判断闭合 less13 less14

  3. tp5--路由的使用(初级)

    在配置文件夹下的route.php文件配置路由: 控制器: 运行结果:

  4. 微信自动关闭内置浏览器页面,返回公众号窗口 WeixinJSBridge.call('closeWindow')

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Qt 的日期 时间

    QDateTime 的构造函数,有参数是QDate的.这样就可以把日期转化成 QDateTime. QDateTime.toTime_t() 可以转化成 Unix 时间.

  6. Android | 教你如何使用HwCameraKit接入相机人像模式

    目录 介绍 简介 关于本次CodeLab 你将建立什么 你会学到什么 你需要什么 申请Camera相关权限 集成HwCameraKit开放能力 步骤1 模式创建:获取CameraKit实例,创建人像模 ...

  7. java中Runnable和Callable的区别

    文章目录 运行机制 返回值的不同 Exception处理 java中Runnable和Callable的区别 在java的多线程开发中Runnable一直以来都是多线程的核心,而Callable是ja ...

  8. 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function

    react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...

  9. 从零开始创建CocoaPods私有库

    为什么要创建CocoaPods私有库? 避免重复的造轮子 节约时间,方便管理自己的代码 精益求精 创建CocoaPods私有库 1.创建私有仓库工程 执行命令pod lib create SmartB ...

  10. TreeMap分析(中)

    通过上篇文章,大家已经能够理解红黑树的基础数据结构,那么这篇文章就来分析下,在红黑树中插入一个结点后,内部数据结构发生了哪些变化. TreeMap插入某个结点的源码分析 /** * 插入节点,并平衡红 ...