Navigating NgRx code can feel like entering a maze. You follow an action from its dispatch site into reducers and effects, then follow another action into more handlers. You started with a simple question—how did this state change?—but before long, you have lost track of how you got there and how to find your way back.

I built NgRx Inspector, a VS Code extension, to give developers a map of that maze: how actions, effects, reducers, and selectors fit together.

The navigation difficulty comes from two separations in NgRx Store:

  • Publishing an event is separate from handling it. The code dispatching an action does not directly call the reducers or effects that respond. Following the action’s definition takes you to its declaration, leaving you to find its handlers elsewhere.
  • Reading state is separate from updating it. Selectors describe how state is read, while reducers define how it changes. Tracing a selector’s inputs does not directly reveal the reducer blocks that update the state it reads.

In Think in Events: A Better Mental Model for NgRx Store, I explained why this separation can be useful: a publisher can announce what happened without knowing every part of the application that needs to react. The tradeoff is that the connections become less visible in the code. Find All References helps, but you still have to work out how each reference fits into the flow.

NgRx Inspector brings those connections into one panel. It connects actions to their dispatch sites and handlers, follows recognized output actions from effects, and traces selectors to their state dependencies and the reducer blocks it can identify as writing to them. Each source link takes you back to the implementation, with the map available to help you keep your bearings.

You can install the extension and find usage examples on the NgRx Inspector Marketplace page.

For a project to explore, the NgRx repository includes a non-trivial example app: a book collection manager built with NgRx Store and Effects. Clone or download the repository, follow its setup instructions, and open it in VS Code. Try using NgRx Inspector to follow an action or trace a selector’s dependencies and see how the pieces fit together.

If you try it, I would welcome feedback on what helps and which relationships it misses.