How to use the @ngrx/router-store.ROUTER_NAVIGATION function in @ngrx/router-store

/**
 * Makes sure that if the user navigates to another route, the sidebar is collapsed
 */
import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { filter, map, tap } from 'rxjs/operators';
import { SearchSidebarCollapseAction } from '../../../+search-page/search-sidebar/search-sidebar.actions';
import * as fromRouter from '@ngrx/router-store';
import { URLBaser } from '../../../core/url-baser/url-baser';

@Injectable()
export class SearchSidebarEffects {
  private previousPath: string;
  @Effect() routeChange$ = this.actions$
    .pipe(
      ofType(fromRouter.ROUTER_NAVIGATION),
      filter((action) => this.previousPath !== this.getBaseUrl(action)),
      tap((action) => {
        this.previousPath = this.getBaseUrl(action)
      }),
      map(() => new SearchSidebarCollapseAction())
    );

  constructor(private actions$: Actions) {

  }

  getBaseUrl(action: any): string {
    /* tslint:disable:no-string-literal */
    const url: string = action['payload'].routerState.url;
    return new URLBaser(url).toString();
    /* tslint:enable:no-string-literal */

'params': {
              'id': 'admin'
            },
            'queryParams': {},
            'fragment': null,
            'path': ['/', 'settings', 'users', 'admin']}
        }
      }));

    // GetTeam should not be called because we are not on the teams page any more.
    expect(store.dispatch).not.toHaveBeenCalledWith(new GetTeam({id: 'admin'}));
  });
});

export class GetRoute implements Action {
  readonly type = routerStore.ROUTER_NAVIGATION;

  constructor(public payload: any) { }
}

import { Injectable } from '@angular/core';
import { Effect, Actions, ofType } from '@ngrx/effects'
import * as fromRouter from '@ngrx/router-store';

import { SearchSidebarCollapseAction } from './search-sidebar.actions';
import { URLBaser } from '../../core/url-baser/url-baser';

/**
 * Makes sure that if the user navigates to another route, the sidebar is collapsed
 */
@Injectable()
export class SearchSidebarEffects {
  private previousPath: string;
  @Effect() routeChange$ = this.actions$
    .pipe(
      ofType(fromRouter.ROUTER_NAVIGATION),
      filter((action) => this.previousPath !== this.getBaseUrl(action)),
      tap((action) => {
        this.previousPath = this.getBaseUrl(action)
      }),
      map(() => new SearchSidebarCollapseAction())
    );

  constructor(private actions$: Actions) {

  }

  getBaseUrl(action: any): string {
    /* tslint:disable:no-string-literal */
    const url: string = action['payload'].routerState.url;
    return new URLBaser(url).toString();
    /* tslint:enable:no-string-literal */

it('should return a COLLAPSE action in response to an UPDATE_LOCATION action', () => {
      actions = hot('--a-', { a: { type: fromRouter.ROUTER_NAVIGATION } });

      const expected = cold('--b-', { b: new HeaderCollapseAction() });

      expect(headerEffects.routeChange$).toBeObservable(expected);
    });

it('should return a COLLAPSE action in response to an UPDATE_LOCATION action to a new route', () => {
      actions = hot('--a-', { a: { type: fromRouter.ROUTER_NAVIGATION, payload: {routerState: {url: dummyURL}} } });

      const expected = cold('--b-', { b: new SidebarCollapseAction() });

      expect(sidebarEffects.routeChange$).toBeObservable(expected);
    });
  });

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects'
import * as fromRouter from '@ngrx/router-store';
import { RouterNavigationAction } from '@ngrx/router-store';
import { Router } from '@angular/router';
import { RouteUpdateAction } from './router.actions';

@Injectable()
export class RouterEffects {
  /**
   * Effect that fires a new RouteUpdateAction when then path of route is changed
   * @type {Observable}
   */
  @Effect() routeChange$ = this.actions$
    .pipe(
      ofType(fromRouter.ROUTER_NAVIGATION),
      pairwise(),
      map((actions: RouterNavigationAction[]) =>
        actions.map((navigateAction) => {
          const urlTree = this.router.parseUrl(navigateAction.payload.routerState.url);
          return urlTree.root.children.primary.segments.map((it) => it.path).join('/');
        })),
      filter((actions: string[]) => actions[0] !== actions[1]),
      map(() => new RouteUpdateAction())
    );

  constructor(private actions$: Actions, private router: Router) {
  }

}

export function reducer(
  state: RouterState = initialState,
  action: any
): RouterState {
  switch (action.type) {
    case fromNgrxRouter.ROUTER_NAVIGATION: {
      return {
        ...state,
        nextState: action.payload.routerState,
        navigationId: action.payload.event.id,
      };
    }

    case fromNgrxRouter.ROUTER_ERROR:
    case fromNgrxRouter.ROUTER_CANCEL: {
      return {
        ...state,
        nextState: undefined,
      };
    }

    case fromNgrxRouter.ROUTER_NAVIGATED: {

* Effect that collapses the public menu on window resize
   * @type {Observable}
   */
  @Effect() resize$ = this.actions$
    .pipe(
      ofType(HostWindowActionTypes.RESIZE),
      map(() => new CollapseMenuAction(this.menuID))
    );

  /**
   * Effect that collapses the public menu on reroute
   * @type {Observable}
   */
  @Effect() routeChange$ = this.actions$
    .pipe(
      ofType(fromRouter.ROUTER_NAVIGATION),
      map(() => new CollapseMenuAction(this.menuID))
    );
  /**
   * Effect that collapses the public menu when the admin sidebar opens
   * @type {Observable}
   */
  @Effect() openAdminSidebar$ = this.actions$
    .pipe(
      ofType(MenuActionTypes.EXPAND_MENU_PREVIEW),
      switchMap((action: ExpandMenuPreviewAction) => {
        return this.menuService.getMenu(action.menuID).pipe(
          first(),
          map((menu: MenuState) => {
            if (menu.id === MenuID.ADMIN) {
              if (!menu.previewCollapsed && menu.collapsed) {
                return new CollapseMenuAction(MenuID.PUBLIC)

import { map } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects'
import * as fromRouter from '@ngrx/router-store';
import { ResetRouteStateAction } from './route.actions';

@Injectable()
export class RouteEffects {
  /**
   * Effect that resets the route state on reroute
   * @type {Observable}
   */
  @Effect() routeChange$ = this.actions$
    .pipe(
      ofType(fromRouter.ROUTER_NAVIGATION),
      map(() => new ResetRouteStateAction())
    );

  constructor(private actions$: Actions) {

  }

}

export function routerReducer(state = defaultRouterState, action) {
  switch (action.type) {
    case router.ROUTER_NAVIGATION:
      const newRouterState =
        set('previousRoute', get('state', state), router.routerReducer(state, action));
      return newRouterState;
    default:
      return state;
  }
}