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

Nesting React components which fetch state asynchronously causes Flux dispatch chain

本文关键字：Flux 组件 获取 异步 状态 React 嵌套      更新时间：2023-09-26

当我有多个异步请求的数据，我怎么能保证响应不会发生在同一个事件循环?这些响应都将触发动作创建者的调度，从而在调度消息中进行调度。

请注意，数据不依赖于，所以使用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)黑客之后，它将工作得很好，因为它强制第二个API调用在下一个事件循环上调度。然而，我确信在某个时候我将再次遇到这个问题。例如，如果我有一个twitter feed，它通过API请求对民意调查进行更新，该怎么办?我如何保证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;
相关文章：