fix(devtools): fix event tracker

Author: rainerhahnekamp

libs/ngrx-toolkit/src/lib/devtools/tests/with-tracked-reducer.spec.ts

@@ -13,7 +13,7 @@ import {
   eventGroup,
   Events,
   on,
-  withEventHandlers,
+  withEffects,
 } from '@ngrx/signals/events';
 import { delay, tap } from 'rxjs';
 import { withDisabledNameIndices } from '../features/with-disabled-name-indicies';
@@ -137,15 +137,15 @@ describe('withTrackedReducer', () => {
       { providedIn: 'root' },
       withBasicStore('store'),
       withState({ count: 0 }),
-      withEventHandlers((store, events = inject(Events)) => [
-        events
+      withEffects((store, events = inject(Events)) => ({
+        bump$: events
           .on(testEvents.bump)
           .pipe(
             tap(() =>
               patchState(store, (state) => ({ count: state.count + 1 })),
             ),
           ),
-      ]),
+      })),
     );
 
     TestBed.inject(Store);
@@ -163,12 +163,12 @@ describe('withTrackedReducer', () => {
     const Store = signalStore(
       { providedIn: 'root' },
       withBasicStore('store'),
-      withEventHandlers((store, events = inject(Events)) => [
-        events.on(testEvents.bump).pipe(
+      withEffects((store, events = inject(Events)) => ({
+        bump$: events.on(testEvents.bump).pipe(
           delay(0),
           tap(() => patchState(store, (state) => ({ count: state.count + 1 }))),
         ),
-      ]),
+      })),
     );
 
     TestBed.inject(Store);
@@ -187,11 +187,11 @@ describe('withTrackedReducer', () => {
     const Store = signalStore(
       { providedIn: 'root' },
       withBasicStore('store'),
-      withEventHandlers((store, events = inject(Events)) => [
-        events
+      withEffects((store, events = inject(Events)) => ({
+        bump$: events
           .on(testEvents.bump)
           .pipe(tap(() => updateState(store, 'Bump', { count: 1 }))),
-      ]),
+      })),
     );
 
     TestBed.inject(Store);

libs/ngrx-toolkit/src/lib/devtools/with-tracked-reducer.ts

@@ -1,4 +1,5 @@
 import { inject, untracked } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   EmptyFeatureResult,
   getState,
@@ -8,12 +9,8 @@ import {
   type,
   withHooks,
 } from '@ngrx/signals';
-import {
-  EventCreator,
-  ReducerEvents,
-  withEventHandlers,
-} from '@ngrx/signals/events';
-import { tap } from 'rxjs/operators';
+import { Dispatcher, EventCreator } from '@ngrx/signals/events';
+import { merge, tap } from 'rxjs';
 import { GLITCH_TRACKING_FEATURE } from './features/with-glitch-tracking';
 import { updateState } from './update-state';
 import { DEVTOOL_FEATURE_NAMES } from './with-devtools';
@@ -31,19 +28,6 @@ export function withTrackedReducer<State extends object>(
     {
       state: type<State>(),
     },
-    withEventHandlers((store, events = inject(ReducerEvents)) =>
-      caseReducers.map((caseReducer) =>
-        events.on(...caseReducer.events).pipe(
-          tap((event) => {
-            const state = untracked(() => getState(store));
-            const result = caseReducer.reducer(event, state);
-            const updaters = Array.isArray(result) ? result : [result];
-
-            updateState(store, event.type, ...updaters);
-          }),
-        ),
-      ),
-    ),
     withHooks((store) => ({
       onInit() {
         if (!(DEVTOOL_FEATURE_NAMES in store)) {
@@ -60,6 +44,23 @@ export function withTrackedReducer<State extends object>(
             `In order to use withTrackedReducer, you must first enable the glitch tracking devtools feature via withDevtools('[your store name]', withGlitchTracking())`,
           );
         }
+
+        const events = getReducerEvents();
+        const updates = caseReducers.map((caseReducer) =>
+          events.on(...caseReducer.events).pipe(
+            tap((event) => {
+              const state = untracked(() => getState(store));
+              const result = caseReducer.reducer(event, state);
+              const updaters = Array.isArray(result) ? result : [result];
+
+              updateState(store, event.type, ...updaters);
+            }),
+          ),
+        );
+
+        merge(...updates)
+          .pipe(takeUntilDestroyed())
+          .subscribe();
       },
     })),
   );
@@ -82,3 +83,27 @@ type CaseReducer<
   | Partial<State>
   | PartialStateUpdater<State>
   | Array<Partial<State> | PartialStateUpdater<State>>;
+
+/**
+ * Returns the synchronous reducer event stream exposed by the dispatcher.
+ *
+ * NgRx's `Dispatcher` delivers events to `ReducerEvents` immediately but feeds
+ * the public `Events` stream via `queueScheduler`, which keeps work in a FIFO
+ * queue and executes scheduled tasks only after the current task completes
+ * ([rxjs.dev](https://rxjs.dev/api/index/const/queueScheduler)). When
+ * `GlitchTrackerService` captures the state change synchronously, that queued
+ * `Events` emission is processed afterward and DevTools records the update as
+ * `Store Update`. Tapping into the reducer stream keeps event names and state
+ * changes aligned.
+ *
+ * TODO(@ngrx): expose a synchronous events API (similar to what `withReducer` uses)
+ * so consumers do not need to reach into dispatcher internals.
+ */
+function getReducerEvents() {
+  type ReducerEventsLike = Dispatcher['reducerEvents'];
+
+  const dispatcher = inject(Dispatcher) as unknown as {
+    reducerEvents: ReducerEventsLike;
+  };
+  return dispatcher.reducerEvents;
+}

libs/ngrx-toolkit/src/lib/with-resource/tests/util/fixtures.ts

@@ -31,6 +31,6 @@ export const vienna: Address = {
 export class AddressResolver {
   resolve(id: number) {
     void id;
-    return Promise.resolve<Address>(this.address);
+    return Promise.resolve<Address>(venice);
   }
 }