Menu
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.
609
After installing the extension, you now should have the Ngrx DevTools available under the "Redux" menu option of your browser development tools (open them with Ctrl+Shift+I in Chrome). After opening the Ngrx DevTools, you will have to reload the application in order to start debugging the application.
Effects are long-running services that listen to an observable of every action dispatched from the Store. Effects filter those actions based on the type of action they are interested in. This is done by using an operator. Effects perform tasks, which are synchronous or asynchronous and return a new action.
To start, the application makes a service call in an effect when the location is updated with a LoadLocations action like you see here: When an error happens, the catchError operator is used, and then of returns an observable with aLocationsError action to update the store.
NgRx is made up of 5 main components - Store, Actions, Reducers, Selectors, and Effects. NgRx uses the Redux concept of unidirectional data flow, where all application data goes through the same lifecycle. This unidirectional data flow makes the application's state more predictable and thus easier to understand.
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.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
