Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.(…)

[irakli-lekishvili]

I'm using this approach for asyncs in my application but always getting this error:

Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.(…)

I'm async function like this:

 if (!this.getInstance().isLoading()) {
      this.getInstance().performSearch();
    }

With setTimeout everything works perfect.

[diabolicfutility]

I also have issues with this. I call things like Store.fetchWhateverFromServer() from componentDidMount and componentWillReceiveProps and get dispatch errors. It pretty much only happens on a fresh page reload when there is lots of async fetching going on. Having to use setTimeouts everywhere feels like a really hacky workaround.

[djbobbydrake]

I also have a question on this. Our codebase is littered with setTimeouts as a workaround for calling multiple actions from the same action class in a given context. Is this just a limitation of flux itself, as the flux loop needs to close before another action can be called? I've tried to encapsulate tracking the state of ajax requests (loading, error messaging) within the same action class, but this often leads to the cannot dispatch in the middle of a dispatch error, so I've had to rely on separate action classes to handle tracking error messaging and loading, but this often doesn't work if there are multiple async ajax requests made on the same page.

[Klaasvaak]

I have the same problem when using nested AltContainers and fetching data in componentDidMount in those containers. Also described it here: altjs/container#5 so far no response.

You can also use MyActions.doAction.defer() instead of MyActions.doAction()