Angular Ngrx DevTools - https://blog.angular-university.io/angular-ngrx-devtools

01.ts

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        ....
        StoreModule.forRoot(reducers, { metaReducers }),
           !environment.production ? StoreDevtoolsModule.instrument() : []
    ],
    bootstrap: [AppComponent]
})
export class AppModule {

}

02.ts

{
  type: 'ROUTER_NAVIGATION',
  payload: {
    routerState: {
      url: '/courses',
      params: {},
      queryParams: {}
    },
    event: {
      id: 1,
      url: '/courses',
      urlAfterRedirects: '/courses',
      state: {
        url: '/courses',
        params: {},
        queryParams: {}
      }
    }
  }
}

03.ts

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        ...
        StoreModule.forRoot(reducers, { metaReducers }),
        !environment.production ? StoreDevtoolsModule.instrument() : [],
        StoreRouterConnectingModule.forRoot({stateKey:'router'})
    ],
    bootstrap: [AppComponent]
})
export class AppModule {

}

04.ts

import {routerReducer} from '@ngrx/router-store';

export interface AppState {

}

export const reducers: ActionReducerMap<AppState> = {
  router: routerReducer
};

...

06.ts

import {storeFreeze} from 'ngrx-store-freeze';
import {routerReducer} from '@ngrx/router-store';

export interface AppState {

}

export const reducers: ActionReducerMap<AppState> = {
  router: routerReducer
};

export const metaReducers: MetaReducer<AppState>[] =
  !environment.production ? [storeFreeze] : [];

  

07.ts

export function authReducer(state = initialAuthState,
                            action: AuthActions): AuthState {
  switch (action.type) {

    case AuthActionTypes.LoginAction:

       state.loggedIn = true;
       state.user = action.payload.user;

      return state;

    ... 

    default:
      return state;
  }
}

08.ts

export function authReducer(state = initialAuthState,
                            action: AuthActions): AuthState {
  switch (action.type) {

    case AuthActionTypes.LoginAction:
      return {
        loggedIn: true,
        user: action.payload.user
      };

    ....

    default:
      return state;
  }
}

09.ts

export enum CourseActionTypes {
  CourseRequested = '[View Course Page] Course Requested',
  CourseLoaded = '[Courses API] Course Loaded',
  AllCoursesRequested = '[Courses Home Page] All Courses Requested',
  AllCoursesLoaded = '[Courses API] All Courses Loaded',
  CourseSaved = '[Edit Course Dialog] Course Saved'
}