Flux reference

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

首先安装

npm install --save flux

Dispatcher

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

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

例子

演示第一个不同点：

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

巴特西

Flux reference

Dispatcher

例子

Flux Utils

最新文章

热门文章