Currently I am working with a project that is getting pretty complicated. It uses Angular and ngrx to manage state change. A common problem I have is working with a particular effect or piece of state and needed to know where the related action was dispatched. Sometimes this is straight forward as there is only 1 line of code that dispatches the action and sometimes this is complicated as there are several. It is also difficult to understand what happens as a consequence of actions as it could cause components to change and effects to trigger (which dispatch more actions).
I am aware of Redux Devtools but this isn't sufficient as it only tells us the order of actions and the state changes. Breakpoints aren't sufficient as a breakpoint in the effects, reducer, or component does not have a stack trace that includes where the action was dispatched.
What you recommend? Any help is appreciated!
We encourage that the action has a source and the event as type, [Source] Event, e.g. [Customers Page] Loaded. This is what we call good action hygiene, because it's clear where the action is dispatched. For more info see the Good Action Hygiene Rule from the NgRx ESLint plugin.
I found Redux DevTools very comfortable, which is incorporated in chrome. Thanks to it you can reconstruct all the steps that are made between actions and effects.