前言

众所周知,React跟Flux是一对好基友。

其中,市场流行的Flux有Redux,Mobx,Reflux。

其中,用法最简单的是Reflux。

其数据流思路如下:

+---------+       +--------+       +-----------------+
¦ Actions ¦------>¦ Stores ¦------>¦ View Components ¦
+---------+ +--------+ +-----------------+
^ ¦
+--------------------------------------+

我们能否再减少其数据流路径?如下:

 +--------+       +-----------------+
¦ Stores ¦------>¦ View Components ¦
+--------+ +-----------------+
^ ¦
----------------------+

两个字,可以。

需求分析

  1. 集成Actions的功能到Stores。从而拿掉单独的Actions。
  2. 集成组件的State和Store在一起。
  3. 跨组件通信依赖其Store。

撸函数

这意味着我们的createStore是一个工厂函数。

用来生产每一个React组件实例对应的Store实例。

function isObject(obj) {
return Object.prototype.toString.call(obj) == '[object Object]';
} function extend(obj) {
if (!isObject(obj)) {
return obj;
}
for (let i = 1, length = arguments.length; i < length; i++) {
let source = arguments[i]; for (let prop in source) {
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
let propertyDescriptor = Object.getOwnPropertyDescriptor(source, prop);
Object.defineProperty(obj, prop, propertyDescriptor);
} else {
obj[prop] = source[prop];
}
}
}
return obj;
} function createStore(definition={}) { function Store() {
let t = this;
t.data = null;
extend(t, definition);
t.trigger = function () {
this.setState({});
} }
let store = new Store();
return store;
};

isObjectextend这两个函数按下不表。

其中,extend函数是用来对象合并,该函数某部位依赖isObject。((__) 嘻嘻……)

createStore函数产出的实例内部

  1. data作为组件实例的store。
  2. trigger作为更新组件实例的方法。

万事具备,只欠东风。

接下来就是用connect函数把组件实例和Store实例连接在一起。

function connect(listenable, context) {
if(!isObject(listenable)){
throw new Error('connect function\'s argument is not a object');
}
return {
componentDidMount() {
context = context || this;
listenable.trigger = listenable.trigger.bind(context);
},
componentWillUnmount() {
listenable.trigger = null;
}
};
}

借用React组件生命周期,在其componentDidMount阶段,

改变Store实例的trigger上下文,使其指向React组件实例,

从而方便trigger调用React组件实例的setState方法。

全套代码如下:

撸Demo

  • Samflux.js
function isObject(obj) {
return Object.prototype.toString.call(obj) == '[object Object]';
} function extend(obj) {
if (!isObject(obj)) {
return obj;
}
for (let i = 1, length = arguments.length; i < length; i++) {
let source = arguments[i]; for (let prop in source) {
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
let propertyDescriptor = Object.getOwnPropertyDescriptor(source, prop);
Object.defineProperty(obj, prop, propertyDescriptor);
} else {
obj[prop] = source[prop];
}
}
}
return obj;
} exports.createStore = function (definition={}) { function Store() {
let t = this;
t.data = null;
extend(t, definition);
t.trigger = function () {
this.setState({});
} }
let store = new Store();
return store;
}; exports.connect = function (listenable, context) {
if(!isObject(listenable)){
throw new Error('connect function\'s argument is not a object');
}
return {
componentDidMount() {
context = context || this;
listenable.trigger = listenable.trigger.bind(context);
},
componentWillUnmount() {
listenable.trigger = null;
}
};
}
  • store.js
const Samflux = require('./Samflux.js');
const Store = Samflux.createStore({
data:'old data',
onSetData: function(){
this.data = 'new data';
this.trigger();
},
}); module.exports = Store;
  • SamfluxTest.js
const Store = require('./store.js');
const Samflux = require('./Samflux.js');
const reactMixin = require('react-mixin');
const React = window.React;
require('./SamfluxTest.less'); class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
setData(){
Store.onSetData();
}
render() {
const me = this;
return (<div className="SamfluxTest" onClick={me.setData.bind(this)}><span>{Store.data}</span></div>);
}
} reactMixin.onClass(Test, Samflux.connect(Store));
module.exports = Test;

实现一个简单的flux的更多相关文章

  1. 响应式编程笔记三:一个简单的HTTP服务器

    # 响应式编程笔记三:一个简单的HTTP服务器 本文我们将继续前面的学习,但将更多的注意力放在用例和编写实际能用的代码上面,而非基本的APIs学习. 我们会看到Reactive是一个有用的抽象 - 对 ...

  2. 哪种缓存效果高?开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  3. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  4. ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  5. 计算机程序的思维逻辑 (60) - 随机读写文件及其应用 - 实现一个简单的KV数据库

    57节介绍了字节流, 58节介绍了字符流,它们都是以流的方式读写文件,流的方式有几个限制: 要么读,要么写,不能同时读和写 不能随机读写,只能从头读到尾,且不能重复读,虽然通过缓冲可以实现部分重读,但 ...

  6. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  7. CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能

    CSharpGL(24)用ComputeShader实现一个简单的图像边缘检测功能 效果图 这是红宝书里的例子,在这个例子中,下述功能全部登场,因此这个例子可作为使用Compute Shader的典型 ...

  8. CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator

    CSharpGL(23)用ComputeShader实现一个简单的ParticleSimulator 我还没有用过Compute Shader,所以现在把红宝书里的例子拿来了,加入CSharpGL中. ...

  9. 应用OpenMP的一个简单的设计模式

    小喵的唠叨话:最近很久没写博客了,一是因为之前写的LSoftmax后馈一直没有成功,所以在等作者的源码.二是最近没什么想写的东西.前两天,在预处理图片的时候,发现处理200w张图片,跑了一晚上也才处理 ...

随机推荐

  1. 【Alpha版本】冲刺阶段——Day3

    [Alpha版本]冲刺阶段--Day3 阅读目录 今日进展 问题困难 明日任务 今日贡献量 TODOlist [今日进展] 密码算法方面: 参考了md5/sha1+salt和Bcrypt后,我们决定使 ...

  2. Linux基础命令---忽略挂起信号nohup

    nohup nohup可以使程序能够忽略挂起信号,继续运行.用户退出时会挂载,而nohup可以保证用户退出后程序继续运行.如果标准输入是终端,请将其从/dev/null重定向.如果标准输出是终端,则将 ...

  3. NFS客户端阻塞睡眠问题与配置调研

    Linux NFS客户端需要很小心地配置,否则在NFS服务器崩溃时,访问NFS的程序会被挂起,用ps查看,进程状态(STAT)处于D,意为(由于IO阻塞而进入)不可中断睡眠(如果是D+,+号表示程序运 ...

  4. ubuntu_virtualenv

    sudo pip install virtualenv 1.安装virtualenv(需要先安装pip): $ [sudo] pip install virtualenv 2.创建虚拟环境: $ vi ...

  5. 巧用ELK快速实现网站流量监控可视化

    前言 本文可能不会详细记录每一步实现的过程,但一定程度上可以引领小伙伴走向更开阔的视野,串联每个环节,呈现予你不一样的效果. 业务规模 8个平台 100+台服务器 10+个集群分组 微服务600+ 用 ...

  6. JDK 的配置和反编译工具的使用---------------Java知识点

    初始Java 1995年5月,sun公司开发了一门新的编程语言------Java 詹姆斯.高斯林(Java之父),Java语言小巧安全具有可移植可跨平台性的优点. 开发java程序的步骤:编写 ,编 ...

  7. kafka数据可靠传输

    再说复制Kafka 的复制机制和分区的多副本架构是Kafka 可靠性保证的核心.把消息写入多个副本可以使Kafka 在发生崩愤时仍能保证消息的持久性. Kafka 的主题被分为多个分区,分区是基本的数 ...

  8. php 获取最近一周,一个月,一年

    <?php date_default_timezone_set('PRC'); /** * 获取最近一周,一个月,一年 * */ function getLatelyTime($type = ' ...

  9. kali linux 数据库分析工具简述

    bbqsql SQL盲注可能很难被利用. 当可用的工具工作时,它们运行良好,但是当它们不工作时,您必须编写自定义的东西. 这是耗时且乏味的. BBQSQL可以帮助你解决这些问题. BBQSQL是一个用 ...

  10. 20145308 《网络对抗》 MSF基础应用 学习总结

    20145308 <网络对抗> MSF基础应用 学习总结 实验内容 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路.具体需要完成(1)一个主动攻击,如ms08_067 ...