React/Alt - avoid dispatching within a dispatch when responding to user input?

Question

I have a component that takes user input. When they save, I use an action to update a store's state

In response to this new information, a results component needs to run an async operation and then respond when new information comes back.

No matter what I try, I seem to be left with a hack setTimeout or a dispatch-within-dispatch error.

The async operation is defined via a datasource and has its own store as outlined here. What's the correct way to structure this behavior?

1. User input is received by input component.
2. Input component uses an action to update a store's state
3. Currently, the store attempts to start the async operation needed by the output component
4. My choice at this point seems to be Dispatch-with-dispatch error or a hack solution involving setTimeout. Neither feels correct.

What am I missing?

Answer 1

Ignore the examples about DataSources. Do not use registerAsync in stores.

Instead, use actions to perform async behavior and have results update stores. In the example you gave, do this from the input component:

Action1.updateStore()
AsyncAction2.run()

Then, use a store watching AsyncAction2 actions to update and inform result components.

Answer 2

If you're sure that you want to be dispatching at that point and just want to avoid getting the "dispatch within a dispatch" error you can use alt's .defer method (see: http://alt.js.org/docs/actions/).