From c6e33d93565ee1fcb2fb09d0edff5ed856147609 Mon Sep 17 00:00:00 2001
From: nasreddine skandrani <nasreddine.skandrani@gmail.com>
Date: Wed, 9 May 2018 13:45:48 -0400
Subject: [PATCH] fix(StoreDevtools): Refresh devtools when extension is
 started (#1017)

Closes #508
---
 modules/store-devtools/spec/store.spec.ts | 18 ++++++++++++++++++
 modules/store-devtools/src/actions.ts     |  6 ++++++
 modules/store-devtools/src/devtools.ts    | 10 ++++++++++
 modules/store-devtools/src/extension.ts   |  6 ++++--
 4 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/modules/store-devtools/spec/store.spec.ts b/modules/store-devtools/spec/store.spec.ts
index 9817375da5..de77ce456f 100644
--- a/modules/store-devtools/spec/store.spec.ts
+++ b/modules/store-devtools/spec/store.spec.ts
@@ -177,6 +177,24 @@ describe('Store Devtools', () => {
       expect(getState()).toBe(2);
     });
 
+    it('should refresh to show current state as is', () => {
+      // actionId 0 = @@INIT
+      store.dispatch({ type: 'INCREMENT' });
+      store.dispatch({ type: 'INCREMENT' });
+      store.dispatch({ type: 'INCREMENT' });
+      store.dispatch({ type: 'INCREMENT' });
+
+      expect(getState()).toBe(4);
+      expect(getLiftedState().stagedActionIds).toEqual([0, 1, 2, 3, 4]);
+      expect(getLiftedState().skippedActionIds).toEqual([]);
+
+      devtools.refresh();
+
+      expect(getState()).toBe(4);
+      expect(getLiftedState().stagedActionIds).toEqual([0, 1, 2, 3, 4]);
+      expect(getLiftedState().skippedActionIds).toEqual([]);
+    });
+
     it('should reset to initial state', () => {
       store.dispatch({ type: 'INCREMENT' });
       expect(getState()).toBe(1);
diff --git a/modules/store-devtools/src/actions.ts b/modules/store-devtools/src/actions.ts
index a52683e6e0..8309cc946f 100644
--- a/modules/store-devtools/src/actions.ts
+++ b/modules/store-devtools/src/actions.ts
@@ -1,6 +1,7 @@
 import { Action } from '@ngrx/store';
 
 export const PERFORM_ACTION = 'PERFORM_ACTION';
+export const REFRESH = 'REFRESH';
 export const RESET = 'RESET';
 export const ROLLBACK = 'ROLLBACK';
 export const COMMIT = 'COMMIT';
@@ -24,6 +25,10 @@ export class PerformAction implements Action {
   }
 }
 
+export class Refresh implements Action {
+  readonly type = REFRESH;
+}
+
 export class Reset implements Action {
   readonly type = RESET;
 
@@ -82,6 +87,7 @@ export class ImportState implements Action {
 
 export type All =
   | PerformAction
+  | Refresh
   | Reset
   | Rollback
   | Commit
diff --git a/modules/store-devtools/src/devtools.ts b/modules/store-devtools/src/devtools.ts
index f117ea45ae..f6e7f3c3e8 100644
--- a/modules/store-devtools/src/devtools.ts
+++ b/modules/store-devtools/src/devtools.ts
@@ -29,6 +29,7 @@ export class DevtoolsDispatcher extends ActionsSubject {}
 @Injectable()
 export class StoreDevtools implements Observer<any> {
   private stateSubscription: Subscription;
+  private extensionStartSubscription: Subscription;
   public dispatcher: ActionsSubject;
   public liftedState: Observable<LiftedState>;
   public state: Observable<any>;
@@ -95,11 +96,16 @@ export class StoreDevtools implements Observer<any> {
         }
       });
 
+    const extensionStartSubscription = extension.start$.subscribe(() => {
+      this.refresh();
+    });
+
     const liftedState$ = liftedStateSubject.asObservable() as Observable<
       LiftedState
     >;
     const state$ = liftedState$.pipe(map(unliftState));
 
+    this.extensionStartSubscription = extensionStartSubscription;
     this.stateSubscription = liftedStateSubscription;
     this.dispatcher = dispatcher;
     this.liftedState = liftedState$;
@@ -122,6 +128,10 @@ export class StoreDevtools implements Observer<any> {
     this.dispatch(new Actions.PerformAction(action, +Date.now()));
   }
 
+  refresh() {
+    this.dispatch(new Actions.Refresh());
+  }
+
   reset() {
     this.dispatch(new Actions.Reset(+Date.now()));
   }
diff --git a/modules/store-devtools/src/extension.ts b/modules/store-devtools/src/extension.ts
index d2aadcd5b2..dfc3140a20 100644
--- a/modules/store-devtools/src/extension.ts
+++ b/modules/store-devtools/src/extension.ts
@@ -60,6 +60,7 @@ export class DevtoolsExtension {
 
   liftedActions$: Observable<any>;
   actions$: Observable<any>;
+  start$: Observable<any>;
 
   constructor(
     @Inject(REDUX_DEVTOOLS_EXTENSION) devtoolsExtension: ReduxDevtoolsExtension,
@@ -169,10 +170,11 @@ export class DevtoolsExtension {
 
     const actionsUntilStop$ = actions$.pipe(takeUntil(stop$));
     const liftedUntilStop$ = liftedActions$.pipe(takeUntil(stop$));
+    this.start$ = start$.pipe(takeUntil(stop$));
 
     // Only take the action sources between the start/stop events
-    this.actions$ = start$.pipe(switchMap(() => actionsUntilStop$));
-    this.liftedActions$ = start$.pipe(switchMap(() => liftedUntilStop$));
+    this.actions$ = this.start$.pipe(switchMap(() => actionsUntilStop$));
+    this.liftedActions$ = this.start$.pipe(switchMap(() => liftedUntilStop$));
   }
 
   private unwrapAction(action: Action) {