How is it possible to debug or inspect the ngrx store, actions and effects?

Question

I am having issues with my application not dispatching some actions or some effects not being called when an action is dispatched (see ngrx effect not being called when action is dispatched from component).

I would like to know how to debug the ngrx store, actions and also effects.

As the typescript sources for ngrx are not available on my environment (only the typings are available it seems), are there other ways to know what is going on in the store and effects?

P.S. It seems the dev store tools only allow for viewing the changes caused by the reducers.

Answer 1

As you discovered, the redux devtools extension is a handy way to monitor store activity in ngrx, too. However, it records all dispatched actions, including those emitted by ngrx effects, whether reducers act on them to update the store or not. If you're not seeing actions dispatched from effects, then something else is a problem preventing their dispatch.

A simple way to temporarily debug observable chains in general, including ngrx effects and store subscriptions, is via .do() operators before and/or after code that doesn't seem to work. It doesn't perturb the flow of code around it, and it lets you do trace logging or add breakpoints for inspection.

Some people wrap .do() logging in custom operators, and there are even attempts to automate .do() insertion between operators for tracing to avoid manually writing them all over the place. I like to keep it simple, and manually inserting them temporarily when debugging specific blocks isn't so bad IMHO.