refactor(router-store): optimize router selectors

ngrx · Oct 28, 2020 · 1c41ab5 · 1c41ab5
1 parent b128dee
commit 1c41ab5
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 63 deletions.
diff --git a/modules/router-store/spec/router_selectors.spec.ts b/modules/router-store/spec/router_selectors.spec.ts
@@ -12,11 +12,15 @@ const mockData = {
       url: [],
       outlet: 'primary',
       routeConfig: null,
-      queryParams: {},
+      queryParams: {
+        ref: 'ngrx.io',
+      },
       queryParamMap: {
-        params: {},
+        params: {
+          ref: 'ngrx.io',
+        },
       },
-      fragment: null,
+      fragment: 'test-fragment',
       firstChild: {
         params: {},
         paramMap: {
@@ -34,10 +38,12 @@ const mockData = {
           path: 'login',
         },
         queryParams: {
-          id: 3,
+          ref: 'ngrx.io',
         },
         queryParamMap: {
-          params: {},
+          params: {
+            ref: 'ngrx.io',
+          },
         },
         firstChild: {
           params: {
@@ -72,38 +78,16 @@ const mockData = {
           fragment: 'test-fragment',
           children: [],
         },
-        fragment: null,
+        fragment: 'test-fragment',
         children: [],
       },
-      children: [
-        {
-          params: {},
-          paramMap: {
-            params: {},
-          },
-          data: {},
-          url: [
-            {
-              path: 'login',
-              parameters: {},
-            },
-          ],
-          outlet: 'primary',
-          routeConfig: {
-            path: 'login',
-          },
-          queryParams: {},
-          queryParamMap: {
-            params: {},
-          },
-          children: [],
-        },
-      ],
+      children: [],
     },
     url: '/login',
   },
   navigationId: 1,
 };
+
 describe('Router State Selectors', () => {
   describe('Composed Selectors', () => {
     interface State {
@@ -145,25 +129,19 @@ describe('Router State Selectors', () => {
     it('should create a selector for selecting the fragment', () => {
       const result = selectors.selectFragment(state);
 
-      expect(result).toEqual(
-        state.router.state.root.firstChild.firstChild.fragment
-      );
+      expect(result).toEqual(state.router.state.root.fragment);
     });
 
     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
-      );
+      expect(result).toEqual(state.router.state.root.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
-      );
+      expect(result).toEqual(state.router.state.root.queryParams.ref);
     });
 
     it('should create a selector for selecting the route params', () => {

diff --git a/modules/router-store/src/router_selectors.ts b/modules/router-store/src/router_selectors.ts
@@ -2,52 +2,60 @@ import { createSelector } from '@ngrx/store';
 import { RouterStateSelectors } from './models';
 import { RouterReducerState } from './reducer';
 
-export function getSelectors<V>(
-  selectState: (state: V) => RouterReducerState<any>
-): RouterStateSelectors<V>;
 export function getSelectors<V>(
   selectState: (state: V) => RouterReducerState<any>
 ): RouterStateSelectors<V> {
   const selectRouterState = createSelector(
     selectState,
-    (router) => router && router.state
+    (router) => router?.state
   );
-  const selectCurrentRoute = createSelector(
+  const selectRootRoute = createSelector(
     selectRouterState,
-    (routerState) => {
-      if (!routerState) {
-        return undefined;
-      }
-      let route = routerState.root;
-      while (route.firstChild) {
-        route = route.firstChild;
-      }
-      return route;
-    }
+    (routerState) => routerState?.root
   );
+  const selectCurrentRoute = createSelector(selectRootRoute, (rootRoute) => {
+    let route = rootRoute;
+    while (route?.firstChild) {
+      route = route.firstChild;
+    }
+    return route;
+  });
   const selectFragment = createSelector(
-    selectCurrentRoute,
-    (route) => route && route.fragment
+    selectRootRoute,
+    (route) => route?.fragment
   );
   const selectQueryParams = createSelector(
-    selectCurrentRoute,
-    (route) => route && route.queryParams
+    selectRootRoute,
+    (route) => route?.queryParams
   );
   const selectQueryParam = (param: string) =>
-    createSelector(selectQueryParams, (params) => params && params[param]);
+    createSelector(selectQueryParams, (params) => params?.[param]);
   const selectRouteParams = createSelector(
     selectCurrentRoute,
-    (route) => route && route.params
+    (route) => route?.params
   );
   const selectRouteParam = (param: string) =>
-    createSelector(selectRouteParams, (params) => params && params[param]);
+    createSelector(selectRootRoute, (rootRoute) => {
+      let route = rootRoute;
+      let paramValue = null;
+
+      while (route?.firstChild) {
+        route = route.firstChild;
+        if (route?.params?.[param]) {
+          paramValue = route.params[param];
+          break;
+        }
+      }
+
+      return paramValue;
+    });
   const selectRouteData = createSelector(
     selectCurrentRoute,
-    (route) => route && route.data
+    (route) => route?.data
   );
   const selectUrl = createSelector(
     selectRouterState,
-    (routerState) => routerState && routerState.url
+    (routerState) => routerState?.url
   );
 
   return {