I've done two React/Redux projects to date, the first using our own middleware and the most recent using redux-thunk
. In the first we used "regular" action objects for our async actions, which our middleware interpreted. In that case, our actions understandably appeared in the action list in the react native debugger.
In the most recent project, however, I noticed that our thunks did not appear as actions in the debugger, which prompted the following questions:
1) Is this normal? 2) If so, do people find this not to be an issue? 3) Do the other async action libraries have the same problem?
Can you share your thunk with me? Thunks return functions that the thunk middleware passes dispatch to and calls. If you're dispatching an action inside of the function that the thunk returns, then you'll see a dispatch. It just won't be from the thunk. Example:
export const gotSomething = data => {
return {
type: GOT_SOMETHING,
data,
};
};
export const getSomething = () => { // <-- This is our thunk!
return async dispatch => {
const { data } = await axios.get('/something');
dispatch(gotSomething(data)); <-- This is the only thing being dispatched
};
};
The only thing that will truly dispatch here is GOT_SOMETHING.
So the order is like this:
So even though you're are technically "calling dispatch" on your thunk, you're actually only dispatching the action inside of the function that your thunk returns. I hope this helps!