Flux reference

Posted 2020-10-17 HelloHello233

https://facebook.github.io/flux/docs/dispatcher.html#content

首先安装

npm install --save flux

Dispatcher

dispatcher 和 订阅发布模式（pub-sub systems）有两个不同点：

1. 在有事件触发的时候，每个注册到dispatcher上的回调函数都会接收到，它们不是针对指定事件才回调
2. 回调函数可以延迟执行，可以等到其他所有或部分回调函数执行后才执行

例子

演示第一个不同点：

const flux = require("flux")

var dispatcher = new flux.Dispatcher();

dispatcher.register(function (payload) {
    console.log("1")
    console.log(payload)
});
dispatcher.register(function (payload) {
    console.log("2")
    console.log(payload)
});

dispatcher.dispatch({
    actionType: ‘city-update‘,
    selectedCity: ‘paris‘
});

运行结果：

1
{ actionType: ‘city-update‘, selectedCity: ‘paris‘ }
2
{ actionType: ‘city-update‘, selectedCity: ‘paris‘ }

可见注册的所有回调函数都按顺序执行了。所以一般要在回调函数中判断类型，再执行后续的操作

 

演示第二个不同点：先执行第二个回调函数再执行第一个。

const flux = require("flux")

var dispatcher = new flux.Dispatcher();

dispatcher.register(function (payload) {
    dispatcher.waitFor([token]);
    console.log("1")
    console.log(payload)
});
var token = dispatcher.register(function (payload) {
    console.log("2")
    console.log(payload)
});

dispatcher.dispatch({
    actionType: ‘city-update‘,
    selectedCity: ‘paris‘
});

执行结果：

2
{ actionType: ‘city-update‘, selectedCity: ‘paris‘ }
1
{ actionType: ‘city-update‘, selectedCity: ‘paris‘ }

dispatcher原理简单实现如下：

class Dispatcher {
    constructor() {
        this.cbs = {}
        this.order = [];  // for marking the register order
        this.curPayload = null;
    }

    register(callback) {
        var token = Math.random()
        this.cbs[token] = {
            callback,
            exected: false,
        }
        this.order.push(token);
        return token
    }

    waitFor(tokens) {
        var self = this;
        tokens.forEach((token) => {
            var c = self.cbs[token]
            c.exected || c.callback(self.curPayload)
            c.exected = true;
        })
    }

    dispatch(payload) {
        this.curPayload = payload
        var self = this;
        this.order.forEach((token) => {
            var c = self.cbs[token]
            c.exected || c.callback(payload)
        })
        // reset status
        this.order.forEach((token) => {
            var c = self.cbs[token]
            c.exected = false;
        })
    }
}

Flux Utils

flux utils 提供了一些工具类来帮助我们实现一个简单的flux架构，但它们不具备flux架构的所有特征，不能帮我们实现所有的用户场景。

这个工具集主要暴露了 3 个类出来，分别是：Store、ReduceStore和Container

主要使用的是ReduceStore和Container

https://github.com/947133297/reactDemo/tree/master/simple-flux