Feature proposal. Thunk actions names in devtools

[Kirill486]

I was writing a complex interaction in my react-rudux application and then I noticed that devtools only shows synchronous actions.

In my case component dispatches a thunk action then this action dispatches actions (objects) and may or may not dispatch another thunk or asynchronous (this a thunk action that makes a back-end request) action.

So, it would be super useful to get to know what exact action is now dispatching.

In example below thunk actions have simple actions dispatching inside them:

thunkAddMembers  {
       asyncAddItemsAction {
              asyncPatchItems {
                      beginModify
                      updatMembers
              }
             endModify
       }
       clearInput
       closeInput       
}

On a second thought It feels like I can do it my own with a little help from community, of course)))

So, before I get started there'are some questions to ask:

About idea at all:

1. Firstly It'll be nice to hear your thoughts.
2. If I have a question about existing code where can I ask it?

About getting started.

3. I found the CODE_OF_CONDUCT but are there more detailed instructions?
4. How would you start building this functionality? Is it better to build it as a addition to present code or make a plug-in or something like that?

[zalmoxisus]

You should get all actions in devtools even if they are not called synchronously using thunks. But I think by action names you meant not action.type, but thunk functions names. We'll have that feature implemented this week (I'm working on #429), so you'll see all functions call stack for a specific action.

It works well with async/await, but not with setTimeout, which breaks the stack (so here it'll not know that it was called from inside incrementAsync. In this case one should either keep track of the stack before and provide it to our trace argument or redefine setTimeout adding the stack wherever it's called.

I'll ping you here when it's ready to be tested.

Feel free to ask questions about the code here. The plan is to move everything inside monorepo and provide contribution guide.

[Kirill486]

I assume, there's something like listener on Mutate State event to get to know what event fires. Where is this code lives? Is it possible to get to know what component fired the action?

[Kirill486]

Also it would be useful to have something like brief explanation like this features live here, that - there. Monitors got me all lost. Are these just react components to share the devtools state? How would you start the tour on this code?

[zalmoxisus]

It's now available in 2.17. Here're the details: docs/Features/Trace.md.
The code is in redux-devtools-trace-monitor.

[aguynamedben]

I also was wondering if Thunk actions could be shown in the UI. The trace functionality allowed me to verify a Redux action was triggered by a Thunk action, but it'd be very, very cool if Thunk actions could show up on the left side along with Redux actions.

I have some more specific ideas of how this would work below. I realize you're the maintainer of a popular open source project, and you probably don't have time to implement all these ideas, but if the idea of more support for redux-thunk support keeps coming up with other users, here's what I'd like to see. Thank you for the time you spend on this project. 🙏 🙏 🙏

---

💡

My app relies a lot of Thunk actions, which yes, are just special-case JavaScript functions, not true Redux actions (i.e. there no action.type), but it would be SO cool if the Redux DevTools Extension could show Thunk actions along with Redux actions.

Ideally the Thunk function names could show up in the left side list, along side the "proper" action.type values. When you click the name of a Thunk function, maybe the Action tab could show the arguments.

Following the redux-thunk readme examples... there's a Thunk action called makeASandwichWithSecretSauce(forPerson). It'd be cool if makeASandwichWithSecretSauce appears in the left, maybe with a small "THUNK" tag. It'd probably be followed by true Redux action.type values, i.e. MAKE_SANDWICH. If you clicked the Thunk function name, you'd see forPerson: 'My partner'.

[BenLorantfy]

@zalmoxisus would you accept a PR that implemented the above comment? I think it would be helpful to see thunk names in the action list.