fix(StoreDevtools): Refresh devtools when extension is started (#1017)

Closes #508

Author: nskandrani

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);

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

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()));
   }

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) {