Using a sources loading() call in a dispatch

[fleshgolem]

I have setup a store with a corresponding source and some action. In this store I have the following bound method:

onLogin() {
    if (!this.getInstance().isLoading()) {
      this.getInstance().performLogin();
    }
  }

My source looks like this:

const AuthSource = {
  performLogin: {
    remote(state) {
      return axios.post(api.apiURL("/login"));
    },
    local(state) {
      return null;
    },
    loading: AuthActions.loggingIn,
    success: AuthActions.loginSuccess,
    error: AuthActions.loginFail
  }

};

I don't feel like I deviated from the doc on sources in any way. Still, i get "Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.". That error kind of make sense since I'm in the middle of the login dispatch, but from the docs I still don't get any idea on how I should handle this.

From how I understand the async example this should happen there as well, since it calls isLoading() from a dispatch callback (onSearch).

If i comment out loading: AuthActions.loggingIn everything works fine, if you disregard the fact that I have no loading action anymore

Is there any more to it that is not covered by the docs?

[avdeveloper]

+1 because this has me stumped as well. It feels like a kludge having to comment out the loading property to avoid dispatch on a dispatch.

From the example repo, what the author did was to call the Source method directly instead of dispatching an action, which I feel breaks the flux pattern.

[thebitguru]

This has been confusing for me as well. Take a look at #556.

[onejgordon]

I'm having this issue as well, and the suggestions in #556 aren't relevant since I:

1) Need the loading action to update the UI state 2) Am not calling my source method from the store, but rather from a componentDidMount.

It seems like this should work as designed, but the Invariant is raised every time unless I comment out the loading action.