Thunks not appearing in action list in React Native Debugger

Question

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?

Answer 1

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:

1. You call a "dispatch" a thunk (but not really).
2. Redux (or the thunk middleware rather) will check to see if the thing you "dispatched" returns an object or a function.
3. If it's a function, that function is called and dispatch is provided to that function
4. That function dispatches some action (the thing you actually dispatched)

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!