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 声明:版权所有,转载请保留本段信息,否则请 ...
随机推荐
- Java集合:ArrayList (JDK1.8 源码解读)
ArrayList ArrayList几乎是每个java开发者最常用也是最熟悉的集合,看到ArrayList这个名字就知道,它必然是以数组方式实现的集合 关注点 说一下ArrayList的几个特点,也 ...
- curl请求本地域名问题
curl在本地虚拟机上请求本地接口时候,出现域名解析问题,换为ip即可,可用curl_error() 或者curl_errno来调试: vue单个文件在引入时候自己的逻辑js文件一定要放在html后引 ...
- Windows系统自带的ODBC Data Sources的配置及使用
一直不明白ODBC是个什么东东,虽然一次次碰到,却从没用过,看Wikipedia上的描述,可以访问各种数据库.Excel.CSV等,可以剥离数据库和操作系统依赖,简直神乎其神.不过这样的描述太抽象概括 ...
- Spring Security OAuth2 笔记(一)
关于 refresh_token refresh_token 主要是用来在 access_token 快要过期的时候,对 access_token 进行一个刷新,生成一个新的 access_token ...
- 【JAVA基础】05 Java语言基础:数组
1. 数组概述和定义格式说明 为什么要有数组(容器) 为了存储同种数据类型的多个值 数组概念 数组是存储同一种数据类型多个元素的集合.也可以看成是一个容器. 数组既可以存储基本数据类型,也可以存储引用 ...
- 【BUG之group_concat默认长度限制】
2019独角兽企业重金招聘Python工程师标准>>> 问题:mysql数据库使用group_concat将多个id组成字符串数组,一共200个,到160个被截断: 原因:mysql ...
- Spring Developer Tools 源码分析:三、重启自动配置'
接上文 Spring Developer Tools 源码分析:二.类路径监控,接下来看看前面提到的这些类是如何配置,如何启动的. spring-boot-devtools 使用了 Spring Bo ...
- Java 线程池(ThreadPoolExecutor)原理分析与实际运用
在我们的开发中"池"的概念并不罕见,有数据库连接池.线程池.对象池.常量池等等.下面我们主要针对线程池来一步一步揭开线程池的面纱. 有关java线程技术文章还可以推荐阅读:< ...
- Regex 正则表达式入门
0,什么是正则表达式 正则表达式(Regular Expression简写为Regex),又称为规则表达式,它是一种强大的文本匹配模式,其用于在字符串中查找匹配符合特定规则的子串. 正则表达式是独立于 ...
- eclipse手动添加SVN插件
最近使用eclipse时,用help下自动下载更新svn总是出错,网上找到手动安装方法,记录下一种可行的 1.手动下载svn插件(百度SVNsite-1.8.18) 2.将下载好的SVNsite-1. ...