javascript - 嵌套异步获取状态的React组件会导致Flux分派(dispatch)链

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

请注意，数据并不相互依赖，因此使用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
        }
    }
});

每次dispatch within a dispatch不变。现在，如果我要引导数据或将UserStore.getAuthors()调度放到setTimeout(func, 0) hack后面，它将很好用，因为它会强制第二个API调用在下一个事件循环上调度。但是，我确定在某个时候我会再次遇到这个问题。例如，如果我有一个通过民意测验中的API请求更新的Twitter提要怎么办？如何保证API请求不会再次出现并干扰其他调度？

我可以这样引导数据：

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

为什么不在调度不变式内创建调度？难道不是同时进行两次调度吗？



更新11/16/15

我切换到Redux，这是更好的Flux实现，并解决了许多这些问题。

最佳答案

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

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;

关于javascript - 嵌套异步获取状态的React组件会导致Flux分派(dispatch)链，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32482573/