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;
复制代码

 

posted @   cecelia  阅读(209)  评论(0编辑  收藏  举报
编辑推荐:
· [.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)
点击右上角即可分享
微信分享提示