Reflux之Store

Posted 2020-11-25 ceceliahappycoding

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;