嵌套异步获取状态的 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
        }
    }
});

我每次都得到 dispatch within a dispatch 不变。现在，如果我要 bootstrap 数据或将 UserStore.getAuthors() 调度放在 setTimeout(func, 0) hack 后面，它会工作正常，因为它强制第二个 API 调用在下一个事件循环中调度.但是，我确信在某些时候我会再次运行讨论这个问题。例如，如果我有一个通过 API 民意调查请求更新的 Twitter 提要怎么办？我如何保证 API 请求不会返回并干扰另一个调度？

我可以bootstrap这样的数据：

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;

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

Nesting React components which fetch state asynchronously causes Flux dispatch chain

javascript

asynchronous

reactjs

flux