CODEWITHSUNDEEP
reactjsreactjs-flux
nicohvi
nicohvi

Reputation: 2270

Handling multiple async calls with flux

I have a Calendar component which, when rendered with a certain prop called LoadOnMount needs to call the server to load a set of flights.

The problem is that I update the calendar by listening to the CalendarStore's Events.UPDATE event, which is triggered by the UPDATE_CALENDAR action dispatched by my Dispatcher, and I load the set of flights using another action called LOAD_FLIGHT_LIST. So when I invoke this new action from the Calendar component's ComponentDidMount function I get the cannot dispatch in the middle of a dispatch error.

Any way to handle these sorts of dependencies? (The calendar is also fetched from the server)

Upvotes: 0

Views: 1396

Answers (1)

Desmond Lee
Desmond Lee

Reputation: 707

You have two issues that I can identify:

The first is that you are trying to get the dispatcher to dispatch during a dispatch. That's not the way you should be doing it.

The second is that you seem to be performing AJAX/async calls from inside your dispatch handler. I don't want to say that you should never do that, but that does not seem to be necessary in your application.

Here's a link to another stack overflow question that I think is similar: https://stackoverflow.com/a/23637463/2152216

The difference is that the asker is trying to perform an Ajax call from within his dispatch handler, while you seem to be trying to dispatch an event that will in turn trigger an ajax call during the event's handling.

What you can do is create an action that asynchronously loads the flight list, then dispatch the FLIGHT_LIST_LOADED action afterwards passing it the fetched flight list. Your store should handle this action and broadcast a change event for all the component observers.

I hope you understand what I'm talking about. If you think I misunderstood your problem, let me know.

Upvotes: 1

Related Questions