Reflux之Store
Reflux中的Store既是一个listener(既有对action的监听,又有对store的监听)同时又是一个publisher.
一、监听单个action
const Reflux = require('reflux'); const action = Reflux.createAction();
const store = Reflux.createStore({
init() {
this.data = { num:0 };
// store监听action
this.listenTo(action, function(){
this.data.num++;
this.trigger(this.data);
}.bind(this))
}
})
// 监听store触发
store.listen(data => console.log(data));
// 触发action
action.trigger('in action');
action();
action();
action();
action();
action();
注意: 1. store.listen方法对store自身trigger进行监听。
2. store.listenTo对其他可监听对象进行监听。
二、同时监听多个actions
const Reflux = require('reflux'); // const actions = Reflux.createActions(['action1', 'action2']);
const actions = Reflux.createActions({
action1: {
asyncResult: true
},
action2: {
asyncResult: true
}
}); const store = Reflux.createStore({
listenables: actions,
// init() {
// this.listenToMany(actions)
// },
action1 () {
console.log('func in action1');
},
onAction1Completed () {
console.log('action1 completed')
},
onAction2() {
console.log('func in action2')
}
}) actions.action1();
actions.action2();
actions.action1.completed();
这里,在createStore中使用listenables属性,或者在init函数中使用listenToMany都可以实现对多个action的监听。使用这种写法对应的callback函数,可以与每个action同名,如action1;也可以使用on+Action,如onAction2。如果使用asyncResult属性定义action,默认下面有completed和failed两个children.
三、 react与Reflux结合demo import { createAction, createStore } from 'reflux';
import React from 'react'; const action = createAction();
const store = createStore({
init() {
this.data = {num: 0};
this.listenTo(action, this.onClick);
},
onClick () {
this.data.num ++;
this.trigger(this.data);
}
})
// React UI
class ContainerUI extends React.Component {
constructor (props) {
super(props);
this.state = {
num: 0
}
}
componentDidMount () {
// 生成关闭函数
this.unmount = store.listen(data => {
this.setState({
num: data.num
})
})
}
componentWillUnmont () {
//调用关闭函数
this.unmount();
}
render () {
return (
<div>
{ this.state.num }
<button onClick={action}>自增</button>
</div>
)
}
}
export default ContainerUI;
Reflux之Store的更多相关文章
- react+reflux入门教程
为了简化react的flux带来的冗余操作,社区的同仁们给我们带来了很多优秀的轮子,诸如redux,reflux等.今天我们就通过逐行讲解代码实例的方法,感受一番reflux的设计之美. 例子 这个例 ...
- 使用reflux进行react组件之间的通信
前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...
- react 之 reflux 填坑
注意:老铁些,在看这篇文章的之前,最好了解一下react 的全局状态管理库哦,不然可能会坐飞机. ^_^ React 之reflux (它是一个功能模块,需要安装引入): import 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 声明:版权所有,转载请保留本段信息,否则请 ...
随机推荐
- 使用Reactor响应式编程
介绍 响应式编程 响应式编程不同于我们熟悉的命令式编程,我们熟悉的命令式编程即代码就是一行接一行的指令,按照它们的顺序一次一条地出现.一个任务被执行,程序就需要等到它执行完了,才能执行下一个任务.每一 ...
- thinkphp5--model数据操作的坑
最近用thinkphp5开发,经常用到model了来操作数据,但是操作多了,就发现他的坑了. 就好像如果你只是初始化一个model对象,但是你却用这个对象进行多次的数据操作,这时候他的数据就会发生混乱 ...
- 探索ORACLE之ASM概念(完整版)
探索ORACLE之ASM概念(完整版) 本文出自https://www.jb51.net/article/43527.htm ASM是Oracle 10g R2中为了简化Oracle数据库的管理而推出 ...
- python学习01python入门一
在正式开启python代码的学习之旅之前,先来了解一下有关python语言的一些内容吧. python的命名,起源等等,大家自行百度了解,此处不再赘述. python是一种解释型语言,具有强调代码可读 ...
- 2019-2020-1 20199329《Linux内核原理与分析》第十三周作业
<Linux内核原理与分析>第十三周作业 一.本周内容概述 通过重现缓冲区溢出攻击来理解漏洞 二.本周学习内容 1.实验简介 注意:实验中命令在 xfce 终端中输入,前面有 $ 的内容为 ...
- MySql id 设定为主键不自增后,再给 sort 字段增加自增属性
需求 id 已经被设置为主键,但是没有给它设置 自增 属性.sort 起到一个排序的作用,需要给它设置一个 自增 属性 加自增属性的前提 表中的属性没有增加自增 赋予自增属性的字段,必须带有 索引 S ...
- zabbix管理,添加监控主机
一:添加本机为监控主机 二.监控其他Linux主机agent端 1.环境部署 [root@localhost ~]# hostname agent.zabbix.com[root@localhost ...
- 通过config文件配置动态导入模块
需求: 固定的服务中要调用不同的算法,当前服务中实现的动态导入是通过在config配置中加上参数:proto="AiProto(1,4)",在服务中from pathname im ...
- node.js koa 实现长轮询
长轮询的实现原理:浏览器发出请求之后,服务端资源如果没有就绪,那么并不立即返回,而是在一个时间范围内,不断地去查询资源是否就绪,如果就绪,就返回资源,如果超时了还没有就绪,就返回超时. 代码实现如下: ...
- Failed building wheel for cytoolz
2019独角兽企业重金招聘Python工程师标准>>> 当我使用 pip instlal cytoolz 时, 报以下错误: error: Microsoft Visual C++ ...