As Angular applications grow, NgRx flows can become surprisingly difficult to follow. An action dispatched from a component may trigger an effect, dispatch another action, update a reducer, and continue through several related paths.
I wanted a better way to understand these relationships without manually jumping through the codebase.
That led me to build ngrx-graph, an open-source tool that analyzes Angular and NgRx source code using the TypeScript AST and generates visual graphs of action flows.
Instead of showing the entire application as one massive graph, it lets you focus on a specific action and see how it connects to:
- Components
- Effects
- Reducers
- Selectors
- Other actions
This can be useful when debugging unfamiliar flows, reviewing code, onboarding developers, or preparing a refactoring.
In the full article, I explain why I built the project, how the static analysis works, some of the challenges I encountered, and where I want to take it next.
Read the full article:
https://ammar-najjar.com/blog/ngrx-graph/
If you work with NgRx, I’d be interested to hear how you navigate complex action flows in larger applications.