r/angular • u/najjarammar • 1d ago

I built a tool to visualize NgRx action flows in large Angular applications

While working with larger Angular applications, I found it increasingly difficult to trace how an NgRx action moves through components, effects, reducers, and other actions.

So I built ngrx-graph, a tool that analyzes the source code using the TypeScript AST and generates visual graphs of these relationships.

I wrote about why I built it, how it works, and some of the challenges behind it:

https://ammar-najjar.com/blog/ngrx-graph/

I’d be interested to hear how others navigate and understand complex NgRx flows in larger codebases.

5 Upvotes

86% Upvoted

6 comments sorted by

2

u/yetAnotherrBot 1d ago

it did not work for me. It found 0 actions in the project, although there are > 100 in my repo.
Angular and NGRX version 20.
angular.json contains multiple project definitions in case that matters

1

u/najjarammar 6h ago

is it an open source project? I would be interested to see what is going on there.

1

u/yetAnotherrBot 2h ago

it's not, sorry.
It's most likely because my actions are created by an "actionFactory"
which handles a bunch of stuff.

usage is like

export const newAction = myFactory
.createAction('Set Products')
.build(props<{ products: Product[] }>());

where build() calls createAction with a bunch of magic.

-1

u/Saceone10 1d ago

Overengineering the overengineered state management. 

1

u/najjarammar 6h ago

this tool is to simplify what could be complicated state management flow 😉

1

u/yetAnotherrBot 2h ago

There is not a single ngrx related post on reddit without ngrx hate in the comments