feat(router-store): add routerState to action payload (#1511)

Author: timdeschryver

modules/router-store/spec/integration.spec.ts

@@ -6,6 +6,7 @@ import {
   RouterStateSnapshot,
   NavigationCancel,
   NavigationError,
+  ActivatedRouteSnapshot,
 } from '@angular/router';
 import { Store, ScannedActionsSubject } from '@ngrx/store';
 import { filter, first, mapTo, take } from 'rxjs/operators';
@@ -88,6 +89,51 @@ describe('integration spec', () => {
       });
   });
 
+  it('should have the routerState in the payload', (done: any) => {
+    const actionLog: RouterAction<any>[] = [];
+    const reducer = (state: string = '', action: RouterAction<any>) => {
+      switch (action.type) {
+        case ROUTER_CANCEL:
+        case ROUTER_ERROR:
+        case ROUTER_NAVIGATED:
+        case ROUTER_NAVIGATION:
+        case ROUTER_REQUEST:
+          actionLog.push(action);
+          return state;
+        default:
+          return state;
+      }
+    };
+
+    createTestModule({
+      reducers: { reducer },
+      canActivate: (
+        route: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot
+      ) => state.url !== 'next',
+    });
+
+    const router: Router = TestBed.get(Router);
+    const log = logOfRouterAndActionsAndStore();
+
+    const hasRouterState = (action: RouterAction<any>) =>
+      !!action.payload.routerState;
+
+    router
+      .navigateByUrl('/')
+      .then(() => {
+        expect(actionLog.filter(hasRouterState).length).toBe(actionLog.length);
+      })
+      .then(() => {
+        actionLog.splice(0);
+        return router.navigateByUrl('next');
+      })
+      .then(() => {
+        expect(actionLog.filter(hasRouterState).length).toBe(actionLog.length);
+        done();
+      });
+  });
+
   xit('should support preventing navigation', (done: any) => {
     const reducer = (state: string = '', action: RouterAction<any>) => {
       if (

modules/router-store/src/actions.ts

@@ -19,16 +19,21 @@ export const ROUTER_REQUEST = '@ngrx/router-store/request';
 /**
  * Payload of ROUTER_REQUEST
  */
-export type RouterRequestPayload = {
+export type RouterRequestPayload<
+  T extends BaseRouterStoreState = SerializedRouterStateSnapshot
+> = {
+  routerState: T;
   event: NavigationStart;
 };
 
 /**
  * An action dispatched when a router navigation request is fired.
  */
-export type RouterRequestAction = {
+export type RouterRequestAction<
+  T extends BaseRouterStoreState = SerializedRouterStateSnapshot
+> = {
   type: typeof ROUTER_REQUEST;
-  payload: RouterRequestPayload;
+  payload: RouterRequestPayload<T>;
 };
 
 /**
@@ -39,7 +44,9 @@ export const ROUTER_NAVIGATION = '@ngrx/router-store/navigation';
 /**
  * Payload of ROUTER_NAVIGATION.
  */
-export type RouterNavigationPayload<T extends BaseRouterStoreState> = {
+export type RouterNavigationPayload<
+  T extends BaseRouterStoreState = SerializedRouterStateSnapshot
+> = {
   routerState: T;
   event: RoutesRecognized;
 };
@@ -62,7 +69,10 @@ export const ROUTER_CANCEL = '@ngrx/router-store/cancel';
 /**
  * Payload of ROUTER_CANCEL.
  */
-export type RouterCancelPayload<T, V extends BaseRouterStoreState> = {
+export type RouterCancelPayload<
+  T,
+  V extends BaseRouterStoreState = SerializedRouterStateSnapshot
+> = {
   routerState: V;
   storeState: T;
   event: NavigationCancel;
@@ -87,7 +97,10 @@ export const ROUTER_ERROR = '@ngrx/router-store/error';
 /**
  * Payload of ROUTER_ERROR.
  */
-export type RouterErrorPayload<T, V extends BaseRouterStoreState> = {
+export type RouterErrorPayload<
+  T,
+  V extends BaseRouterStoreState = SerializedRouterStateSnapshot
+> = {
   routerState: V;
   storeState: T;
   event: NavigationError;
@@ -112,16 +125,21 @@ export const ROUTER_NAVIGATED = '@ngrx/router-store/navigated';
 /**
  * Payload of ROUTER_NAVIGATED.
  */
-export type RouterNavigatedPayload = {
+export type RouterNavigatedPayload<
+  T extends BaseRouterStoreState = SerializedRouterStateSnapshot
+> = {
+  routerState: T;
   event: NavigationEnd;
 };
 
 /**
  * An action dispatched after navigation has ended and new route is active.
  */
-export type RouterNavigatedAction = {
+export type RouterNavigatedAction<
+  T extends BaseRouterStoreState = SerializedRouterStateSnapshot
+> = {
   type: typeof ROUTER_NAVIGATED;
-  payload: RouterNavigatedPayload;
+  payload: RouterNavigatedPayload<T>;
 };
 
 /**
@@ -131,8 +149,8 @@ export type RouterAction<
   T,
   V extends BaseRouterStoreState = SerializedRouterStateSnapshot
 > =
-  | RouterRequestAction
+  | RouterRequestAction<V>
   | RouterNavigationAction<V>
   | RouterCancelAction<T, V>
   | RouterErrorAction<T, V>
-  | RouterNavigatedAction;
+  | RouterNavigatedAction<V>;

modules/router-store/src/router_store_module.ts

@@ -13,6 +13,7 @@ import {
   RoutesRecognized,
   NavigationStart,
   Event,
+  RouterEvent,
 } from '@angular/router';
 import { select, Selector, Store } from '@ngrx/store';
 import { withLatestFrom } from 'rxjs/operators';
@@ -51,6 +52,12 @@ export interface StoreRouterConfig<
   navigationActionTiming?: NavigationActionTiming;
 }
 
+interface StoreRouterActionPayload {
+  event: RouterEvent;
+  routerState?: SerializedRouterStateSnapshot;
+  storeState?: any;
+}
+
 export enum NavigationActionTiming {
   PreActivation = 1,
   PostActivation = 2,
@@ -281,28 +288,38 @@ export class StoreRouterConnectingModule {
 
   private dispatchRouterCancel(event: NavigationCancel): void {
     this.dispatchRouterAction(ROUTER_CANCEL, {
-      routerState: this.routerState!,
       storeState: this.storeState,
       event,
     });
   }
 
   private dispatchRouterError(event: NavigationError): void {
     this.dispatchRouterAction(ROUTER_ERROR, {
-      routerState: this.routerState!,
       storeState: this.storeState,
       event: new NavigationError(event.id, event.url, `${event}`),
     });
   }
 
   private dispatchRouterNavigated(event: NavigationEnd): void {
-    this.dispatchRouterAction(ROUTER_NAVIGATED, { event });
+    const routerState = this.serializer.serialize(
+      this.router.routerState.snapshot
+    );
+    this.dispatchRouterAction(ROUTER_NAVIGATED, { event, routerState });
   }
 
-  private dispatchRouterAction(type: string, payload: any): void {
+  private dispatchRouterAction(
+    type: string,
+    payload: StoreRouterActionPayload
+  ): void {
     this.trigger = RouterTrigger.ROUTER;
     try {
-      this.store.dispatch({ type, payload });
+      this.store.dispatch({
+        type,
+        payload: {
+          routerState: this.routerState,
+          ...payload,
+        },
+      });
     } finally {
       this.trigger = RouterTrigger.NONE;
     }