Flux reference
https://facebook.github.io/flux/docs/dispatcher.html#content
首先安装
npm install --save flux
Dispatcher
dispatcher 和 订阅发布模式(pub-sub systems)有两个不同点:
- 在有事件触发的时候,每个注册到dispatcher上的回调函数都会接收到,它们不是针对指定事件才回调
- 回调函数可以延迟执行,可以等到其他所有或部分回调函数执行后才执行
例子
演示第一个不同点:
const flux = require("flux") var dispatcher = new flux.Dispatcher(); dispatcher.register(function (payload) {
console.log("1")
console.log(payload)
});
dispatcher.register(function (payload) {
console.log("2")
console.log(payload)
}); dispatcher.dispatch({
actionType: 'city-update',
selectedCity: 'paris'
});
运行结果:
1
{ actionType: 'city-update', selectedCity: 'paris' }
2
{ actionType: 'city-update', selectedCity: 'paris' }
可见注册的所有回调函数都按顺序执行了。所以一般要在回调函数中判断类型,再执行后续的操作
演示第二个不同点:先执行第二个回调函数再执行第一个。
const flux = require("flux") var dispatcher = new flux.Dispatcher(); dispatcher.register(function (payload) {
dispatcher.waitFor([token]);
console.log("1")
console.log(payload)
});
var token = dispatcher.register(function (payload) {
console.log("2")
console.log(payload)
}); dispatcher.dispatch({
actionType: 'city-update',
selectedCity: 'paris'
});
执行结果:
2
{ actionType: 'city-update', selectedCity: 'paris' }
1
{ actionType: 'city-update', selectedCity: 'paris' }
dispatcher原理简单实现如下:
class Dispatcher {
constructor() {
this.cbs = {}
this.order = []; // for marking the register order
this.curPayload = null;
} register(callback) {
var token = Math.random()
this.cbs[token] = {
callback,
exected: false,
}
this.order.push(token);
return token
} waitFor(tokens) {
var self = this;
tokens.forEach((token) => {
var c = self.cbs[token]
c.exected || c.callback(self.curPayload)
c.exected = true;
})
} dispatch(payload) {
this.curPayload = payload
var self = this;
this.order.forEach((token) => {
var c = self.cbs[token]
c.exected || c.callback(payload)
})
// reset status
this.order.forEach((token) => {
var c = self.cbs[token]
c.exected = false;
})
}
}
Flux Utils
flux utils 提供了一些工具类来帮助我们实现一个简单的flux架构,但它们不具备flux架构的所有特征,不能帮我们实现所有的用户场景。
这个工具集主要暴露了 3 个类出来,分别是:Store、ReduceStore和Container
主要使用的是ReduceStore和Container
https://github.com/947133297/reactDemo/tree/master/simple-flux
Flux reference的更多相关文章
- 构建具有用户身份认证的 React + Flux 应用程序
原文:Build a React + Flux App with User Authentication 译者:nzbin 译者的话:这是一篇内容详实的 React + Flux 教程,文章主要介绍了 ...
- Spring Boot Reference Guide
Spring Boot Reference Guide Authors Phillip Webb, Dave Syer, Josh Long, Stéphane Nicoll, Rob Winch, ...
- React: 研究Flux设计模式
一.简介 一般来说,State管理在React中是一种最常用的实现机制,使用这种state管理系统基本可以开发各种需求的应用程序.然而,随着应用程序规模的不断扩张,原有的这种State管理系统就会暴露 ...
- ASP.NET Core: You must add a reference to assembly mscorlib, version=4.0.0.0
ASP.NET Core 引用外部程序包的时候,有时会出现下面的错误: The type 'Object' is defined in an assembly that is not referenc ...
- Flux 普及读本
话说当时做 APP 时,三月不知肉味,再次将眼光投放前端,有种天上一天,地下一年的感觉. Flux 是一种思想 了解的最好方式当然是看Flux官方文档了.React 中文站点也能找到对应的翻译版本,但 ...
- 【转】Django Model field reference学习总结
Django Model field reference学习总结(一) 本文档包含所有字段选项(field options)的内部细节和Django已经提供的field types. Field 选项 ...
- (转) Qt 出现“undefined reference to `vtable for”原因总结
由于Qt本身实现的机制所限,我们在使用Qt制作某些软件程序的时候,会遇到各种各样这样那样的问题,而且很多是很难,或者根本找不到原因的,即使解决了问题,如果有人问你为什么,你只能回答--不知道. 今天我 ...
- undefined reference to `__android_log_print'
使用android studio 编写NDK代码时出现错误:undefined reference to `__android_log_print' 解决办法: eclipse andro ...
- CentOS 6.5 编译 PHP-7 报错:undefined reference to `libiconv_open 无法编译 PHP libiconv
./configure --with-mysql=/backup/mysql --with-freetype-dir --with-jpeg-dir --with-png-dir --with-zli ...
随机推荐
- [Usaco2011 Dec]Grass Planting
Description Farmer John has N barren pastures connected by N-1 bidirectional roads, such that there ...
- Hadoop概念学习系列之Hadoop 生态系统
当下 Hadoop 已经成长为一个庞大的生态体系,只要和海量数据相关的领域,都有 Hadoop 的身影.下图是一个 Hadoop 生态系统的图谱,详细列举了在 Hadoop 这个生态系统中出现的各种数 ...
- 清空模拟器中的app
1.打开模拟器 2.在左上角得下拉菜单选择“还原内容和设置” 3.选择“还原” ,确定 就ok了! 图解如下:
- [題解]luogu_P1333瑞瑞的木棍(并查集/圖論)
是一道歐拉路的題竟然沒看出來...... 把每種顏色看成一個點,每根木棍看成一個邊,即相同顏色在圖中接好合併成了一個點, 問題轉化為了求是否存在歐拉路 如果用map會超時,所以可以用字典樹實現離散化/ ...
- Elasticsearch之安装
elasticsearch需要java8以上支持 java -version 二进制文件下载 www.elastic.co/downloads tar安装示例 1.下载tar文件 curl -L -O ...
- atomic用法
memory order 源码变成可执行程序,一般由预编译,编译,汇编,链接.源码重排序一般分为编译期重排序和运行期重排序. 编译期重排序:编译器在不改变单线程程序的语义的前提下,可以重新安排语句的执 ...
- ecshop如何增加多个产品详细描述的编辑器
在做商产品详情的时候,经常会有选项卡类似的几个产品说明,如:商品详情,商品规格,参数列表,售后服务等. Ecshop后台里面默认只有一个编辑框(器),那么我们还得自己添加几个,以下是ecshop如何增 ...
- arcengine,c# 二次开发
plication.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); ESRI.ArcGIS.Ru ...
- h5旋转效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Incredibuild导入key的方式
作者:朱金灿 来源:http://blog.csdn.net/clever101 Incredibuild5.0采用新的授权机制,在安装完服务端之后右键单击它的授权文件License .ib_lic, ...