Using a sources loading() call in a dispatch
- Dominant language
- JavaScript
- Stars
- 3.4k
- Forks
- 312
- PR merge metrics
- No merged PRs in 30d
Description
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?
Contributor guide
Research direction
Start with the sources documentation and the async example, then trace how the `loading: AuthActions.loggingIn` callback is dispatched during `performLogin`. Compare that path with the `onSearch` example and reproduce the nested-dispatch error; done means the documented loading flow no longer raises the invariant violation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100