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 声明:版权所有,转载请保留本段信息,否则请 ...
随机推荐
- 搭建phpMyAdmin
MySQL常见的管理工具 今天选择的phpMyAdmin 一款基于浏览器管理数据库的工具. 下载可以去官网下载https://files.phpmyadmin.net/phpMyAdmin/4.7.5 ...
- SpringBoot应用操作Rabbitmq
记录RabbitMQ的简单应用 1.springboot项目中引入maven包,也是springboot官方的插件 <dependency> <groupId>org.spri ...
- 关于用C-free进行C语言编程在电脑中生成的.exe和.o文件
在使用C-free进行C语言编程时,程序运行后会自动在电脑文件中生成以.exe和.o为后缀名的文件: 1,生成的.exe文件为系统自动打包完成的应用程序,该程序可直接在其他无C-free环境的电脑上运 ...
- 【手把手教你】win10 虚拟机 VMware Workstation Pro 15下安装Ubuntu 19.04
虚拟机 VMware Workstation Pro 15.5.0 及永久激活密钥 https://www.cnblogs.com/zero-vic/p/11584437.html Ubuntu19. ...
- 你的GitHub,怎么和我用的不太一样?
说起代码托管,相信绝大多数人脑海中浮现出的第一个词都是"GitHub".经过多年的发展,GitHub俨然已经成为了代码托管领域的标签- 随着国内互联网环境的优化,互联网产业链的不断 ...
- System Call
内容 设计系统调用,将系统的相关信息(CPU型号.操作系统的版本号.系统中的进程等类似于Windows的任务管理器的信息)以文本形式列表显示于屏幕,并编写用户程序予以验证. 思想 系统调用是应用程序和 ...
- 解决vue渲染时闪烁{{}}的问题
原文转自: 点我 Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题在写APP社区页面的时候在一些地方用了v-show,在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也 ...
- 数学--数论--HDU 5223 - GCD
Describtion In mathematics, the greatest common divisor (gcd) of two or more integers, when at least ...
- A Tile Painting(循环节)
Ujan has been lazy lately, but now has decided to bring his yard to good shape. First, he decided to ...
- 图论--2-SAT--Ligthoj 1407 Explosion 三元关系枚举
Planet Krypton is about to explode. The inhabitants of this planet have to leave the planet immediat ...