fix(store-devtools): reduce CD cycles by listening message outside …

…of Angular

This commit updates the extension connection setup and wraps it with `runOutsideAngular`
to prevent running change detection too frequently. This ensures that change detection is
only triggered when all asynchronous actions have been processed.

Closes #3839

modules/store-devtools/spec/config.spec.ts

@@ -30,6 +30,7 @@ describe('StoreDevtoolsOptions', () => {
       features: defaultFeatures,
       trace: false,
       traceLimit: 75,
+      ngZone: 'enabled',
     });
   });
 
@@ -67,6 +68,7 @@ describe('StoreDevtoolsOptions', () => {
       features: {
         test: true,
       },
+      ngZone: 'enabled',
     });
   });
 
@@ -84,6 +86,7 @@ describe('StoreDevtoolsOptions', () => {
       trace: false,
       traceLimit: 75,
       features: defaultFeatures,
+      ngZone: 'enabled',
     });
   });
 
@@ -107,6 +110,7 @@ describe('StoreDevtoolsOptions', () => {
         export: true,
         test: true,
       },
+      ngZone: 'enabled',
     });
   });
 
@@ -133,6 +137,7 @@ describe('StoreDevtoolsOptions', () => {
       },
       trace: false,
       traceLimit: 75,
+      ngZone: 'enabled',
     });
   });
 });

modules/store-devtools/spec/extension.spec.ts

@@ -71,6 +71,12 @@ function createState(
   };
 }
 
+const ngZone = {
+  runOutsideAngular<T>(fn: () => T) {
+    return fn();
+  },
+} as any;
+
 describe('DevtoolsExtension', () => {
   let reduxDevtoolsExtension: ReduxDevtoolsExtension;
   let extensionConnection: ReduxDevtoolsExtensionConnection;
@@ -106,7 +112,8 @@ describe('DevtoolsExtension', () => {
     devtoolsExtension = new DevtoolsExtension(
       reduxDevtoolsExtension,
       createConfig({}),
-      <any>null
+      <any>null,
+      ngZone
     );
     // Subscription needed or else extension connection will not be established.
     devtoolsExtension.actions$.subscribe(() => null);
@@ -128,7 +135,8 @@ describe('DevtoolsExtension', () => {
         trace: true,
         traceLimit: 20,
       }),
-      <any>null
+      <any>null,
+      ngZone
     );
     // Subscription needed or else extension connection will not be established.
     devtoolsExtension.actions$.subscribe(() => null);
@@ -155,7 +163,8 @@ describe('DevtoolsExtension', () => {
         name: 'ngrx-store-devtool-todolist',
         serialize: customSerializer,
       }),
-      <any>null
+      <any>null,
+      ngZone
     );
     // Subscription needed or else extension connection will not be established.
     devtoolsExtension.actions$.subscribe(() => null);
@@ -169,7 +178,8 @@ describe('DevtoolsExtension', () => {
       devtoolsExtension = new DevtoolsExtension(
         reduxDevtoolsExtension,
         createConfig({}),
-        <any>null
+        <any>null,
+        ngZone
       );
       const defaultOptions = createOptions();
       const action = {} as LiftedAction;
@@ -193,7 +203,8 @@ describe('DevtoolsExtension', () => {
           actionSanitizer: myActionSanitizer,
           stateSanitizer: myStateSanitizer,
         }),
-        <any>null
+        <any>null,
+        ngZone
       );
 
       const options = createOptions(
@@ -234,7 +245,8 @@ describe('DevtoolsExtension', () => {
           devtoolsExtension = new DevtoolsExtension(
             reduxDevtoolsExtension,
             createConfig({}),
-            <any>null
+            <any>null,
+            ngZone
           );
           // Subscription needed or else extension connection will not be established.
           devtoolsExtension.actions$.subscribe(() => null);
@@ -272,7 +284,8 @@ describe('DevtoolsExtension', () => {
             createConfig({
               actionSanitizer: testActionSanitizer,
             }),
-            <any>null
+            <any>null,
+            ngZone
           );
           // Subscription needed or else extension connection will not be established.
           devtoolsExtension.actions$.subscribe(() => null);
@@ -318,7 +331,8 @@ describe('DevtoolsExtension', () => {
             createConfig({
               stateSanitizer: testStateSanitizer,
             }),
-            <any>null
+            <any>null,
+            ngZone
           );
           // Subscription needed or else extension connection will not be established.
           devtoolsExtension.actions$.subscribe(() => null);
@@ -363,7 +377,8 @@ describe('DevtoolsExtension', () => {
               actionSanitizer: testActionSanitizer,
               stateSanitizer: testStateSanitizer,
             }),
-            <any>null
+            <any>null,
+            ngZone
           );
           // Subscription needed or else extension connection will not be established.
           devtoolsExtension.actions$.subscribe(() => null);
@@ -400,7 +415,8 @@ describe('DevtoolsExtension', () => {
           createConfig({
             actionsBlocklist: [BLOCKED_ACTION_1, BLOCKED_ACTION_2],
           }),
-          <any>null
+          <any>null,
+          ngZone
         );
         // Subscription needed or else extension connection will not be established.
         devtoolsExtension.actions$.subscribe(() => null);
@@ -442,7 +458,8 @@ describe('DevtoolsExtension', () => {
           createConfig({
             actionsSafelist: [SAFE_ACTION_1, SAFE_ACTION_2],
           }),
-          <any>null
+          <any>null,
+          ngZone
         );
         // Subscription needed or else extension connection will not be established.
         devtoolsExtension.actions$.subscribe(() => null);
@@ -492,7 +509,8 @@ describe('DevtoolsExtension', () => {
           createConfig({
             predicate,
           }),
-          <any>null
+          <any>null,
+          ngZone
         );
         // Subscription needed or else extension connection will not be established.
         devtoolsExtension.actions$.subscribe(() => null);
@@ -528,7 +546,8 @@ describe('DevtoolsExtension', () => {
       devtoolsExtension = new DevtoolsExtension(
         reduxDevtoolsExtension,
         createConfig({}),
-        <any>null
+        <any>null,
+        ngZone
       );
       // Subscription needed or else extension connection will not be established.
       devtoolsExtension.actions$.subscribe(() => null);
@@ -563,7 +582,8 @@ describe('DevtoolsExtension', () => {
       devtoolsExtension = new DevtoolsExtension(
         reduxDevtoolsExtension,
         createConfig({}),
-        <any>null
+        <any>null,
+        ngZone
       );
       // Subscription needed or else extension connection will not be established.
       devtoolsExtension.actions$.subscribe(() => null);
@@ -600,7 +620,8 @@ describe('DevtoolsExtension', () => {
       devtoolsExtension = new DevtoolsExtension(
         reduxDevtoolsExtension,
         createConfig({}),
-        <any>null
+        <any>null,
+        ngZone
       );
       // Subscription needed or else extension connection will not be established.
       devtoolsExtension.actions$.subscribe();

modules/store-devtools/src/config.ts

@@ -114,6 +114,13 @@ export class StoreDevtoolsConfig {
    * Maximum stack trace frames to be stored (in case trace option was provided as true).
    */
   traceLimit?: number;
+
+  /**
+   * The property determines whether the extension connection is established within the
+   * Angular zone or not. This is set to `enabled` by default, which means the connection
+   * is set up within the Angular zone by default to ensure backward compatibility.
+   */
+  ngZone?: 'enabled' | 'noop';
 }
 
 export const STORE_DEVTOOLS_CONFIG = new InjectionToken<StoreDevtoolsConfig>(
@@ -165,6 +172,7 @@ export function createConfig(
       dispatch: true, // Dispatch custom actions or action creators
       test: true, // Generate tests for the selected actions
     },
+    ngZone: 'enabled',
   };
 
   const options =

modules/store-devtools/src/devtools.ts

@@ -1,4 +1,11 @@
-import { Injectable, Inject, ErrorHandler, OnDestroy } from '@angular/core';
+import {
+  Injectable,
+  Inject,
+  ErrorHandler,
+  NgZone,
+  OnDestroy,
+  inject,
+} from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import {
   Action,
@@ -11,6 +18,7 @@ import {
 } from '@ngrx/store';
 import {
   merge,
+  MonoTypeOperatorFunction,
   Observable,
   Observer,
   queueScheduler,
@@ -69,11 +77,23 @@ export class StoreDevtools implements Observer<any>, OnDestroy {
 
     const liftedReducer$ = reducers$.pipe(map(liftReducer));
 
+    // Using `inject` function instead of the constructor parameter to prevent breaking
+    // changes if the `StoreDevtools` is being extended by consumers.
+    const ngZone = inject(NgZone);
+    const ngZoneEnabled = config.ngZone === 'enabled';
+
     const liftedStateSubject = new ReplaySubject<LiftedState>(1);
 
     this.liftedStateSubscription = liftedAction$
       .pipe(
         withLatestFrom(liftedReducer$),
+        // The extension would post messages back outside of the Angular zone
+        // because we call `connect()` wrapped with `runOutsideAngular`. We run change
+        // detection only once at the end after all the required asynchronous tasks have
+        // been processed (for instance, `setInterval` scheduled by the `timeout` operator).
+        // We have to re-enter the Angular zone before the `scan` since it runs the reducer
+        // which must be run within the Angular zone.
+        enterNgZone(ngZoneEnabled, ngZone),
         scan<
           [any, ActionReducer<LiftedState, Actions.All>],
           {
@@ -110,9 +130,11 @@ export class StoreDevtools implements Observer<any>, OnDestroy {
         }
       });
 
-    this.extensionStartSubscription = extension.start$.subscribe(() => {
-      this.refresh();
-    });
+    this.extensionStartSubscription = extension.start$
+      .pipe(enterNgZone(ngZoneEnabled, ngZone))
+      .subscribe(() => {
+        this.refresh();
+      });
 
     const liftedState$ =
       liftedStateSubject.asObservable() as Observable<LiftedState>;
@@ -196,3 +218,26 @@ export class StoreDevtools implements Observer<any>, OnDestroy {
     this.dispatch(new Actions.PauseRecording(status));
   }
 }
+
+function enterNgZone<T>(
+  ngZoneEnabled: boolean,
+  ngZone: NgZone
+): MonoTypeOperatorFunction<T> {
+  // This is required to return the source observable (without re-entering the
+  // Angular zone) to maintain backward compatibility.
+  if (ngZoneEnabled) {
+    return (source) => source;
+  }
+
+  // If `ngZone` is nooped by default (or explicitly), we return a
+  // new observable that proxies values from the source observable, but
+  // with `next` being called within the Angular zone.
+  return (source: Observable<T>) =>
+    new Observable<T>((subscriber) =>
+      source.subscribe({
+        next: (value) => ngZone.run(() => subscriber.next(value)),
+        error: (error) => ngZone.run(() => subscriber.error(error)),
+        complete: () => ngZone.run(() => subscriber.complete()),
+      })
+    );
+}

modules/store-devtools/src/extension.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { Inject, Injectable, InjectionToken, NgZone } from '@angular/core';
 import { Action, UPDATE } from '@ngrx/store';
 import { EMPTY, Observable, of } from 'rxjs';
 import {
@@ -80,7 +80,8 @@ export class DevtoolsExtension {
   constructor(
     @Inject(REDUX_DEVTOOLS_EXTENSION) devtoolsExtension: ReduxDevtoolsExtension,
     @Inject(STORE_DEVTOOLS_CONFIG) private config: StoreDevtoolsConfig,
-    private dispatcher: DevtoolsDispatcher
+    private dispatcher: DevtoolsDispatcher,
+    private ngZone: NgZone
   ) {
     this.devtoolsExtension = devtoolsExtension;
     this.createActionStreams();
@@ -167,10 +168,21 @@ export class DevtoolsExtension {
       return EMPTY;
     }
 
+    const ngZoneEnabled = this.config.ngZone === 'enabled';
+
     return new Observable((subscriber) => {
-      const connection = this.devtoolsExtension.connect(
-        this.getExtensionConfig(this.config)
-      );
+      const connection = ngZoneEnabled
+        ? this.devtoolsExtension.connect(this.getExtensionConfig(this.config))
+        : // To reduce change detection cycles, we need to run the `connect` method
+          // outside of the Angular zone. The `connect` method adds a `message`
+          // event listener to communicate with an extension using `window.postMessage`
+          // and handle message events.
+          // We will re-enter the Angular zone when handling specific actions from the
+          // extension and when dispatching actions through `store.dispatch`.
+          this.ngZone.runOutsideAngular(() =>
+            this.devtoolsExtension.connect(this.getExtensionConfig(this.config))
+          );
+
       this.extensionConnection = connection;
       connection.init();