We have just set up the router store. This means that we automatically write to a property router in our store every time we navigate. We can prove this is the case by editing the app.component.ts to subscribe to that slice of state:

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { Increment, Decrement } from './actions';
import { AppState } from './app-state';

@Component({
  selector: 'app-root',
  template: `
    {{ count$ | async }}
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
    <app-todos></app-todos>
    <jedi-list></jedi-list>
    <div>
      <a routerLink="/testing" routerLinkActive="active">Testing</a>
    </div>
    <router-outlet></router-outlet>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  count$: Observable<number>;

  constructor(private store: Store<AppState>) {
    this.count$ = store.select('count');
    store
      .select(state => state.router)
      .subscribe(route => console.log('router obj', route));
  }

  increment() {
    this.store.dispatch(Increment());
  }

  decrement() {
    this.store.dispatch(Decrement());
  }
}

Here, we subscribe to the state router and thereby listen to every time the route changes. We log the said object and it looks like this:

This screenshot shows us the object our router state now contains. We can see the url property points to / which means our default route has been loaded. We can also see that this object contains router parameters and query parameters in the root property. So, there is some interesting information in there. 

Let's see what happens when we route somewhere like /testing:

Our router state has been updated and we can see that our url property points to /testing. 

So far, we have subscribed to the router state and listened to when the route is changing. There is a second way. We could be listening to when a specific action is being dispatched. The action being dispatched for routing is the string ROUTER_NAVIGATION. We can therefore easily build an effect for this so we can carry out side effects when the route changes. We may want to carry out AJAX requests or store things in a local cache. Only you know what you want to do. Let's build that effect. We will return back to an existing file, routing.effects.ts, and extend it:

import { Injectable } from '@angular/core';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Router } from '@angular/router';
import { map, tap, switchMap } from 'rxjs/operators';
import { Action } from '@ngrx/store';
import { PRODUCTS, RoutingAction } from './routing.constants';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class RoutingEffects {
  @Effect({ dispatch: false })
  gotoProducts$ = this.actions$.ofType(PRODUCTS).pipe(
    tap(action => {
      this.router.navigate([action.payload.url]);
    })
  );

  @Effect({ dispatch: false })
  locationUpdate$: Observable<Action> = 
    this.actions$.ofType('ROUTER_NAVIGATION').pipe(
      tap((action: any) => {
        console.log('router navigation effect', action);
      })
  );

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