Debugging with Redux DevTools

There are two major strategies to debug and get instrumentation from NgRx.

1. Implement a console logger for debugging
2. Configure Store DevTools for rich instrumentation

Let's start with the simple debugging solution.

Implement NgRx Console Logger

In app.module, StoreModule is configured to inject a MetaReducer into your configuration. Meta-reducers are able to listen to all events happening in the action-reducer pipeline, thereby giving you the ability to preprocess actions. We can use this hook to implement a simple logger.

1. Implement a function called logger in reducers/index.ts:

   src/app/reducers/index.ts
   export function logger(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
     return (state, action) => {
       const result = reducer(state, action)
       console.groupCollapsed(action.type)
       console.log('prev state', state)
       console.log('action', action...