使用通量处理多个异步调用答案

【问题标题】：Handling multiple async calls with flux使用通量处理多个异步调用
【发布时间】：2015-05-02 15:50:11
【问题描述】：

我有一个 Calendar 组件，当使用名为 LoadOnMount 的特定道具渲染时，它需要调用服务器来加载一组航班。

问题是我通过侦听CalendarStore 的Events.UPDATE 事件来更新日历，该事件由我的调度程序调度的UPDATE_CALENDAR 操作触发，然后我使用另一个名为LOAD_FLIGHT_LIST。因此，当我从 Calendar 组件的 ComponentDidMount 函数调用这个新操作时，我得到了 cannot dispatch in the middle of a dispatch 错误。

有什么方法可以处理这些依赖关系？（日历也是从服务器获取的）

【问题讨论】：

您是否正在等待 2 个或更多对组件中存储的异步调用？如果我理解正确，您似乎正在尝试安装一个组件两次。这行不通。如果这是我建议使用componentWillRecieveProps 或shouldComponentUpdate 的问题。在这里，您要确保从两个异步调用中获取信息。（因为您对两个呼叫使用相同的事件）。如果我误解了您的问题，请纠正我。
抱歉，我的问题的措辞可能很糟糕：我只安装了一次组件，但如果某些条件为真，则需要两次调用服务器来获取其数据，但按一定的顺序。也许这个问题能更好地解释它：github.com/facebook/flux/issues/168
您的异步调用是同时发送的还是可以连续发送的？
我正在连续进行，只有在第一次调用的响应满足特定条件时才会进行第二次调用。

标签： reactjs reactjs-flux

【解决方案1】：

我可以确定您有两个问题：

首先是您试图让调度程序在调度期间进行调度。这不是你应该这样做的方式。

第二个是您似乎正在从内部调度处理程序执行 AJAX/异步调用。我不想说你永远不应该这样做，但在你的应用程序中似乎没有必要这样做。

这是另一个我认为类似的堆栈溢出问题的链接：https://stackoverflow.com/a/23637463/2152216

不同之处在于，提问者试图从他的调度处理程序中执行 Ajax 调用，而您似乎试图调度一个事件，而该事件又会在事件处理期间触发一个 ajax 调用。

您可以做的是创建一个异步加载航班列表的操作，然后调度 FLIGHT_LIST_LOADED 操作，然后将获取的航班列表传递给它。您的商店应处理此操作并为所有组件观察者广播更改事件。

我希望你明白我在说什么。如果您认为我误解了您的问题，请告诉我。

【讨论】：

我的问题类似，但在问题中他只需要处理 one AJAX 调用（我可以做到就好），而不是 two（这是我遇到问题的地方）。您假设我想在调度处理程序中进行 AJAX 调用是正确的，或者 - 更准确地说 - 我希望处理程序 initiate AJAX 调用。您的建议很好（我已经考虑过这样做），但是如果 not 在实际调度处理程序中，您如何建议我触发加载航班列表的操作？
我会在异步调用中触发动作。该操作接收异步调用的结果（航班列表）。因此，您应该在 Calendar 组件的 componentWillMount 方法中进行调用，并在回调中触发操作。
嗯，组件不知道调用，因为它是通过 Actions 单例抽象出来的。第一个操作在其success 处理程序中接收数据，这是真的 - 但该处理程序也调度UPDATE_CALENDAR 事件。因此，如果我像您建议的那样，从success 处理程序中触发 second 操作，那么我将遇到在调度中调度的相同问题（因为不能保证UPDATE_CALENDAR 将有在发送LOAD_FLIGHT_LIST 事件之前完成）。
听起来你想触发两个动作：UPDATE_CALENDAR 和LOAD_FLIGHT_LIST。但是您希望它们按顺序执行。为什么他们需要按顺序执行？ LOAD_FLIGHT_LIST 是否也发出更改事件？应该，因为它更改了 CalendarStore 中的某些内容。
这是我在 jsfiddle 中制作的一个示例。它有一个商店，CalendarStore，和两个组件，MainView 和 CalendarView：jsfiddle.net/deslee/jz2gt0av/4