fix(RouterStore): Add generic type to RouterReducerState (#292)

Closes #289

Author: brandonroberts

docs/router-store/api.md

@@ -8,31 +8,43 @@ issues when used with the Store Devtools. In most cases, you may only need a pie
 To use the time-traveling debugging in the Devtools, you must return an object containing the `url` when using the `routerReducer`.
 
 ```ts
-import { StoreModule } from '@ngrx/store';
+import { StoreModule, ActionReducerMap } from '@ngrx/store';
+import { Params } from '@angular/router';
 import {
   StoreRouterConnectingModule,
   routerReducer,
+  RouterReducerState,
   RouterStateSerializer,
-  RouterStateSnapshotType
+  RouterStateSnapshot
 } from '@ngrx/router-store';
 
 export interface RouterStateUrl {
   url: string;
+  queryParams: Params;
+}
+
+export interface State {
+  routerReducer: RouterReducerState<RouterStateUrl>;
 }
 
 export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
   serialize(routerState: RouterStateSnapshot): RouterStateUrl {
     const { url } = routerState;
+    const queryParams = routerState.root.queryParams;
 
-    // Only return an object including the URL
+    // Only return an object including the URL and query params
     // instead of the entire snapshot
-    return { url };
+    return { url, queryParams };
   }
 }
 
+export const reducers: ActionReducerMap<State> = {
+  routerReducer: routerReducer
+};
+
 @NgModule({
   imports: [
-    StoreModule.forRoot({ routerReducer: routerReducer }),
+    StoreModule.forRoot(reducers),
     RouterModule.forRoot([
       // routes
     ]),

example-app/app/reducers/index.ts

@@ -6,6 +6,7 @@ import {
   MetaReducer,
 } from '@ngrx/store';
 import { environment } from '../../environments/environment';
+import { RouterStateUrl } from '../shared/utils';
 import * as fromRouter from '@ngrx/router-store';
 
 /**
@@ -23,7 +24,7 @@ import * as fromLayout from '../core/reducers/layout';
  */
 export interface State {
   layout: fromLayout.State;
-  routerReducer: fromRouter.RouterReducerState;
+  routerReducer: fromRouter.RouterReducerState<RouterStateUrl>;
 }
 
 /**

example-app/app/shared/utils.ts

@@ -1,24 +1,26 @@
 import { RouterStateSerializer } from '@ngrx/router-store';
-import { RouterStateSnapshot } from '@angular/router';
+import { RouterStateSnapshot, Params } from '@angular/router';
 
 /**
  * The RouterStateSerializer takes the current RouterStateSnapshot
  * and returns any pertinent information needed. The snapshot contains
  * all information about the state of the router at the given point in time.
  * The entire snapshot is complex and not always needed. In this case, you only
- * need the URL from the snapshot in the store. Other items could be
- * returned such as route parameters, query parameters and static route data.
+ * need the URL and query parameters from the snapshot in the store. Other items could be
+ * returned such as route parameters and static route data.
  */
 
 export interface RouterStateUrl {
   url: string;
+  queryParams: Params;
 }
 
 export class CustomRouterStateSerializer
   implements RouterStateSerializer<RouterStateUrl> {
   serialize(routerState: RouterStateSnapshot): RouterStateUrl {
     const { url } = routerState;
+    const queryParams = routerState.root.queryParams;
 
-    return { url };
+    return { url, queryParams };
   }
 }

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

@@ -325,11 +325,13 @@ describe('integration spec', () => {
           : null;
       };
 
-      class CustomSerializer implements RouterStateSerializer<{ url: string }> {
+      class CustomSerializer
+        implements RouterStateSerializer<{ url: string; params: any }> {
         serialize(routerState: RouterStateSnapshot) {
           const url = `${routerState.url}-custom`;
+          const params = { test: 1 };
 
-          return { url };
+          return { url, params };
         }
       }
 
@@ -353,7 +355,14 @@ describe('integration spec', () => {
           expect(log).toEqual([
             { type: 'router', event: 'NavigationStart', url: '/next' },
             { type: 'router', event: 'RoutesRecognized', url: '/next' },
-            { type: 'store', state: { url: '/next-custom', navigationId: 2 } },
+            {
+              type: 'store',
+              state: {
+                url: '/next-custom',
+                navigationId: 2,
+                params: { test: 1 },
+              },
+            },
             { type: 'router', event: 'NavigationEnd', url: '/next' },
           ]);
           log.splice(0);

modules/router-store/src/router_store_module.ts

@@ -28,7 +28,7 @@ export type RouterNavigationPayload<T> = {
 /**
  * An action dispatched when the router navigates.
  */
-export type RouterNavigationAction<T> = {
+export type RouterNavigationAction<T = RouterStateSnapshot> = {
   type: typeof ROUTER_NAVIGATION;
   payload: RouterNavigationPayload<T>;
 };
@@ -41,18 +41,18 @@ export const ROUTER_CANCEL = 'ROUTER_CANCEL';
 /**
  * Payload of ROUTER_CANCEL.
  */
-export type RouterCancelPayload<T> = {
-  routerState: RouterStateSnapshot;
+export type RouterCancelPayload<T, V> = {
+  routerState: V;
   storeState: T;
   event: NavigationCancel;
 };
 
 /**
  * An action dispatched when the router cancel navigation.
  */
-export type RouterCancelAction<T> = {
+export type RouterCancelAction<T, V = RouterStateSnapshot> = {
   type: typeof ROUTER_CANCEL;
-  payload: RouterCancelPayload<T>;
+  payload: RouterCancelPayload<T, V>;
 };
 
 /**
@@ -63,37 +63,37 @@ export const ROUTER_ERROR = 'ROUTE_ERROR';
 /**
  * Payload of ROUTER_ERROR.
  */
-export type RouterErrorPayload<T> = {
-  routerState: RouterStateSnapshot;
+export type RouterErrorPayload<T, V> = {
+  routerState: V;
   storeState: T;
   event: NavigationError;
 };
 
 /**
  * An action dispatched when the router errors.
  */
-export type RouterErrorAction<T> = {
+export type RouterErrorAction<T, V = RouterStateSnapshot> = {
   type: typeof ROUTER_ERROR;
-  payload: RouterErrorPayload<T>;
+  payload: RouterErrorPayload<T, V>;
 };
 
 /**
  * An union type of router actions.
  */
-export type RouterAction<T> =
+export type RouterAction<T, V = RouterStateSnapshot> =
   | RouterNavigationAction<T>
-  | RouterCancelAction<T>
-  | RouterErrorAction<T>;
+  | RouterCancelAction<T, V>
+  | RouterErrorAction<T, V>;
 
-export type RouterReducerState = {
-  state: RouterStateSnapshot;
+export type RouterReducerState<T = RouterStateSnapshot> = {
+  state: T;
   navigationId: number;
 };
 
-export function routerReducer(
-  state: RouterReducerState,
+export function routerReducer<T = RouterStateSnapshot>(
+  state: RouterReducerState<T>,
   action: RouterAction<any>
-): RouterReducerState {
+): RouterReducerState<T> {
   switch (action.type) {
     case ROUTER_NAVIGATION:
     case ROUTER_ERROR: