fix(RouterStore): don't navigate on NavigationStart router event

ngrx · Oct 24, 2018 · 9530e1e · 9530e1e
1 parent 8e9a167
commit 9530e1e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/modules/router-store/src/router_store_module.ts b/modules/router-store/src/router_store_module.ts
@@ -12,6 +12,7 @@ import {
   Router,
   RoutesRecognized,
   NavigationStart,
+  Event,
 } from '@angular/router';
 import { select, Selector, Store } from '@ngrx/store';
 import { withLatestFrom } from 'rxjs/operators';
@@ -152,6 +153,7 @@ export class StoreRouterConnectingModule {
     };
   }
 
+  private lastEvent: Event | null = null;
   private routerState: SerializedRouterStateSnapshot | null;
   private storeState: any;
   private trigger = RouterTrigger.NONE;
@@ -192,6 +194,9 @@ export class StoreRouterConnectingModule {
     if (this.trigger === RouterTrigger.ROUTER) {
       return;
     }
+    if (this.lastEvent instanceof NavigationStart) {
+      return;
+    }
 
     const url = routerStoreState.state.url;
     if (this.router.url !== url) {
@@ -212,6 +217,8 @@ export class StoreRouterConnectingModule {
     this.router.events
       .pipe(withLatestFrom(this.store))
       .subscribe(([event, storeState]) => {
+        this.lastEvent = event;
+
         if (event instanceof NavigationStart) {
           this.routerState = this.serializer.serialize(
             this.router.routerState.snapshot

diff --git a/projects/example-app/src/app/reducers/index.ts b/projects/example-app/src/app/reducers/index.ts
@@ -47,11 +47,11 @@ export const reducers: ActionReducerMap<State> = {
 export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
   return (state: State, action: any): any => {
     const result = reducer(state, action);
-    console.groupCollapsed(action.type);
-    console.log('prev state', state);
-    console.log('action', action);
-    console.log('next state', result);
-    console.groupEnd();
+    // console.groupCollapsed(action.type);
+    // console.log('prev state', state);
+    // console.log('action', action);
+    // console.log('next state', result);
+    // console.groupEnd();
 
     return result;
   };