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;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)