feat(router-store): add selectQueryParam and selectRouteParam (#2014)

Select a specific query param or route param

Usage:

export const selectId = selectRouteParam('id');
export const selectRef = selectQueryParam('ref');

Author: timdeschryver

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

@@ -61,9 +61,13 @@ const mockData = {
           routeConfig: {
             path: ':id',
           },
-          queryParams: {},
+          queryParams: {
+            ref: 'ngrx.io',
+          },
           queryParamMap: {
-            params: {},
+            params: {
+              ref: 'ngrx.io',
+            },
           },
           children: [],
         },
@@ -115,11 +119,13 @@ describe('Router State Selectors', () => {
 
       selectors = getSelectors((state: State) => state.router);
     });
+
     it('should create selectCurrentRoute selector for selecting the current route', () => {
       const result = selectors.selectCurrentRoute(state);
 
       expect(result).toEqual(state.router.state.root.firstChild.firstChild);
     });
+
     it('should return undefined from selectCurrentRoute if routerState does not exist', () => {
       interface State {
         router: any;
@@ -134,27 +140,47 @@ describe('Router State Selectors', () => {
 
       expect(result).toEqual(undefined);
     });
+
     it('should create a selector for selecting the query params', () => {
       const result = selectors.selectQueryParams(state);
 
       expect(result).toEqual(
         state.router.state.root.firstChild.firstChild.queryParams
       );
     });
+
+    it('should create a selector for selecting a specific query param', () => {
+      const result = selectors.selectQueryParam('ref')(state);
+
+      expect(result).toEqual(
+        state.router.state.root.firstChild.firstChild.queryParams.ref
+      );
+    });
+
     it('should create a selector for selecting the route params', () => {
       const result = selectors.selectRouteParams(state);
 
       expect(result).toEqual(
         state.router.state.root.firstChild.firstChild.params
       );
     });
+
+    it('should create a selector for selecting a specific route param', () => {
+      const result = selectors.selectRouteParam('id')(state);
+
+      expect(result).toEqual(
+        state.router.state.root.firstChild.firstChild.params.id
+      );
+    });
+
     it('should create a selector for selecting the route data', () => {
       const result = selectors.selectRouteData(state);
 
       expect(result).toEqual(
         state.router.state.root.firstChild.firstChild.data
       );
     });
+
     it('should create a selector for selecting the url', () => {
       const result = selectors.selectUrl(state);
 

modules/router-store/src/models.ts

@@ -3,7 +3,9 @@ import { Data, Params } from '@angular/router';
 export interface RouterStateSelectors<V> {
   selectCurrentRoute: (state: V) => any;
   selectQueryParams: (state: V) => Params;
+  selectQueryParam: (param: string) => (state: V) => string | undefined;
   selectRouteParams: (state: V) => Params;
+  selectRouteParam: (param: string) => (state: V) => string | undefined;
   selectRouteData: (state: V) => Data;
   selectUrl: (state: V) => string;
 }

modules/router-store/src/router_selectors.ts

@@ -26,10 +26,14 @@ export function getSelectors<V>(
     selectCurrentRoute,
     route => route && route.queryParams
   );
+  const selectQueryParam = (param: string) =>
+    createSelector(selectQueryParams, params => params && params[param]);
   const selectRouteParams = createSelector(
     selectCurrentRoute,
     route => route && route.params
   );
+  const selectRouteParam = (param: string) =>
+    createSelector(selectRouteParams, params => params && params[param]);
   const selectRouteData = createSelector(
     selectCurrentRoute,
     route => route && route.data
@@ -42,7 +46,9 @@ export function getSelectors<V>(
   return {
     selectCurrentRoute,
     selectQueryParams,
+    selectQueryParam,
     selectRouteParams,
+    selectRouteParam,
     selectRouteData,
     selectUrl,
   };

projects/ngrx.io/content/guide/router-store/selectors.md

@@ -12,7 +12,7 @@ Usage:
 `reducers/index.ts`
 
 ```ts
-import { getSelectors, RouterReducerState } from '@ngrx/router-store';
+import * as fromRouter from '@ngrx/router-store';
 
 export interface State {
   router: fromRouter.RouterReducerState<any>;
@@ -25,9 +25,13 @@ export const selectRouter = createFeatureSelector<
 
 const {
   selectQueryParams,    // select the current route query params
+  selectQueryParam,     // factory function to select a query param
   selectRouteParams,    // select the current route params
+  selectRouteParam,     // factory function to select a route param
   selectRouteData,      // select the current route data
   selectUrl,            // select the current url
-} = getSelectors(selectRouter);
+} = fromRouter.getSelectors(selectRouter);
 
+export const selectRouteId = selectRouteParam('id');
+export const selectStatus = selectQueryParam('status');
 ```