How can I debug or check ngrx storage, actions and effects?

Question

I'm having problems with my application not sending any actions or some effects that are not called when the action is sent (see ngrx effect is not called when the action is sent from the component ).

I would like to know how to debug ngrx storage, actions, as well as effects.

As typescript sources for ngrx are not available in my environment (only typings are available), are there other ways to find out what is happening in the store and the effects?

PS It seems that Dev store tools allow you to view changes caused by gearboxes.

Answer 1

As you discovered, the redux devtools extension is a convenient way to track store activity in ngrx. However, it records all submitted actions, including those emitted by ngrx effects, regardless of whether reducers act on them to update the store or not. If you don’t see the actions sent from the effects, then something else is a problem preventing them from being sent.

A simple way to temporarily debug observable circuits in general, including ngrx effects and storage subscriptions, is done using .do() operators before and / or after code that doesn't seem to work. It does not disrupt the flow of code around it and allows you to keep a trace log or add breakpoints for verification.

Some people end up .do() logging in user operations, and there are even attempts to automate the insertion of .do() between statements for tracing to avoid manually recording them all over the place. I like to keep it simple and manually insert them temporarily when debugging certain blocks is not so bad. IMHO.