refactor(router-store): optimize selectFragment, selectQueryParams an…

…d selectQueryParam selectors
ngrx · Dec 29, 2020 · cb9062f · cb9062f
1 parent 7a806e2
commit cb9062f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 33 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,7 +78,7 @@ const mockData = {
           fragment: 'test-fragment',
           children: [],
         },
-        fragment: null,
+        fragment: 'test-fragment',
         children: [],
       },
       children: [
@@ -92,10 +98,15 @@ const mockData = {
           routeConfig: {
             path: 'login',
           },
-          queryParams: {},
+          queryParams: {
+            ref: 'ngrx.io',
+          },
           queryParamMap: {
-            params: {},
+            params: {
+              ref: 'ngrx.io',
+            },
           },
+          fragment: 'test-fragment',
           children: [],
         },
       ],
@@ -104,6 +115,7 @@ const mockData = {
   },
   navigationId: 1,
 };
+
 describe('Router State Selectors', () => {
   describe('Composed Selectors', () => {
     interface State {
@@ -145,25 +157,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,35 +2,33 @@ 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
   );
-  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 && routerState.root
   );
+  const selectCurrentRoute = createSelector(selectRootRoute, (rootRoute) => {
+    if (!rootRoute) {
+      return undefined;
+    }
+    let route = rootRoute;
+    while (route.firstChild) {
+      route = route.firstChild;
+    }
+    return route;
+  });
   const selectFragment = createSelector(
-    selectCurrentRoute,
+    selectRootRoute,
     (route) => route && route.fragment
   );
   const selectQueryParams = createSelector(
-    selectCurrentRoute,
+    selectRootRoute,
     (route) => route && route.queryParams
   );
   const selectQueryParam = (param: string) =>