javascript - 嵌套异步获取状态的 React 组件会导致 Flux 调度链

Question

当我有多个异步数据请求时，如何保证响应不会在同一事件循环中发生？这些响应都将触发来自操作创建者的调度，从而导致调度消息中的调度。

请注意，数据不相互依赖，因此使用 waitFor() 不会执行任何操作。

例如，两个组件:

let Post = React.createClass({
    getInitialState () {
        return {
            post: PostStore.getPost(postID) //This triggers an API call
        }
    },

    render () {
        return (
            <Authors/>
        );
    }
});

let Authors = React.createClass({
    getInitialState () {
        return {
            authors: UserStore.getAuthors() //This also triggers an API call
        }
    }
});

我每次都会得到调度内的调度不变式。现在，如果我要引导数据或将 UserStore.getAuthors() 分派(dispatch)放在 setTimeout(func, 0) hack 之后，它将正常工作，因为它会强制第二个 API 调用调度下一个事件循环。但是，我确信在某个时候我会再次遇到这个问题。例如，如果我有一个通过投票中的 API 请求进行更新的 Twitter feed，该怎么办？如何保证 API 请求不会返回并干扰另一次调度？

我可以像这样引导数据:

PostStore.initialize(window.posts);
UserStore.initialize(window.users);

为什么不在调度不变量中创建调度？不是同时发送两次吗？

<小时/>

2015 年 11 月 16 日更新

我已经切换到Redux ，这是更好的 Flux 实现，解决了很多这样的问题。

Answer 1

我正在使用此实现，因此所有调度都会排队，并且我从来没有遇到任何问题:

var Dispatcher = require('flux').Dispatcher;
var assign = require('object-assign');
var Constants = require('Constants');
var async = require('async');

var PayloadSources = Constants.PayloadSources;

var dispatcher = new Dispatcher();

var queue = async.queue( function (task, callback) {
    var payload = {
        source:PayloadSources[task.source],
        action: task.action
    };
    AppDispatcher.dispatch(payload);
    callback();

}, 1);

var AppDispatcher = assign(dispatcher, {
    handleServerAction: function (action) {
        queue.push({source : 'SERVER_ACTION', action : action});
        // console.log(queue);
    },
    handleViewAction: function (action) {
        queue.push({source: 'VIEW_ACTION', action : action});
        // console.log(queue);
    }
});


module.exports = AppDispatcher;