feat(devtools): expose tracked event payloads from withTrackedReducer

withTrackedReducer now forwards full event objects to updateState so Redux DevTools can show payload data, not only action names.

Author: sqrter

apps/demo/src/app/feature-factory/feature-factory.component.ts

@@ -34,7 +34,7 @@ function withMyEntity<Entity>(loadMethod: (id: number) => Promise<Entity>) {
 const UserStore = signalStore(
   { providedIn: 'root' },
   withMethods(() => ({
-    findById(id: number) {
+    findById(_id: number) {
       return of({ id: 1, name: 'Konrad' });
     },
   })),

docs/docs/with-devtools.md

@@ -41,7 +41,7 @@ The extensions don't activate during app initialization (as it is with `@ngrx/st
 import { updateState } from '@angular-architects/ngrx-toolkit';
 ```
 
-The Signal Store does not use the Redux pattern, so there are no action names involved by default. Instead, every action is referred to as a "Store Update". If you want to customize the action name for better clarity, you can use the `updateState()` function instead of `patchState()`:
+The Signal Store does not use the Redux pattern, so there are no action names involved by default. Instead, every action is referred to as a "Store Update". If you want to customize the action entry for better clarity, you can use the `updateState()` function instead of `patchState()`:
 
 ```typescript
 import { updateState } from '@angular-architects/ngrx-toolkit';
@@ -50,6 +50,9 @@ patchState(this.store, { loading: false });
 
 // updateState is a wrapper around patchState and has an action name as second parameter
 updateState(this.store, 'update loading', { loading: false });
+
+// updateState also accepts an action object with a mandatory type field
+updateState(this.store, { type: '[Book Store] bookSelected', payload: { bookId: '1' } }, { selectedBookId: '1' });
 ```
 
 ## `renameDevtoolsName()`
@@ -172,7 +175,7 @@ const Store = signalStore(
 ## Events tracking: `withTrackedReducer`
 
 `withTrackedReducer` tracks state changes within the events
-plugin. This utility automatically derives the event name, streamlining
+plugin. This utility automatically derives the event entry, streamlining
 the tracking process.
 
 To use it
@@ -188,6 +191,7 @@ export const bookEvents = eventGroup({
   source: 'Book Store',
   events: {
     loadBooks: type<void>(),
+    bookSelected: type<{ bookId: string }>(),
   },
 });
 
@@ -202,6 +206,10 @@ const Store = signalStore(
     on(bookEvents.loadBooks, () => ({
       books: mockBooks,
     })),
+    // DevTools action will include payload: { bookId: string }
+    on(bookEvents.bookSelected, ({ payload }) => ({
+      selectedBookId: payload.bookId,
+    })),
   ),
   withHooks({
     onInit() {

libs/ngrx-toolkit/src/lib/devtools/internal/current-action-names.ts

@@ -1 +1,3 @@
-export const currentActionNames = new Set<string>();
+import { Action } from './models';
+
+export const currentActionNames = new Set<string | Action>();

libs/ngrx-toolkit/src/lib/devtools/internal/devtools-syncer.service.ts

@@ -10,12 +10,25 @@ import { StateSource } from '@ngrx/signals';
 import { REDUX_DEVTOOLS_CONFIG } from '../provide-devtools-config';
 import { currentActionNames } from './current-action-names';
 import { DevtoolsInnerOptions } from './devtools-feature';
-import { Connection, StoreRegistry, Tracker } from './models';
+import { Action, Connection, StoreRegistry, Tracker } from './models';
 
 const dummyConnection: Connection = {
   send: () => void true,
 };
 
+function toDevtoolsAction(actions: (string | Action)[]): Action {
+  if (!actions.length) {
+    return { type: 'Store Update' };
+  }
+
+  const objects = actions.filter((a): a is Action => typeof a === 'object');
+  const type = [
+    ...new Set(actions.map((a) => (typeof a === 'string' ? a : a.type))),
+  ].join(', ');
+
+  return objects.length ? { ...objects[0], type } : { type };
+}
+
 /**
  * A service provided by the root injector is
  * required because the synchronization runs
@@ -90,11 +103,11 @@ export class DevtoolsSyncer implements OnDestroy {
       ...mappedChangedStatePerName,
     };
 
-    const names = Array.from(currentActionNames);
-    const type = names.length ? names.join(', ') : 'Store Update';
+    const actions = Array.from(currentActionNames);
+    const action = toDevtoolsAction(actions);
     currentActionNames.clear();
 
-    this.#connection.send({ type }, this.#currentState);
+    this.#connection.send(action, this.#currentState);
   }
 
   getNextId() {

libs/ngrx-toolkit/src/lib/devtools/internal/models.ts

@@ -2,7 +2,7 @@ import { StateSource } from '@ngrx/signals';
 import { ReduxDevtoolsConfig } from '../provide-devtools-config';
 import { DevtoolsInnerOptions } from './devtools-feature';
 
-export type Action = { type: string };
+export type Action = { type: string; [key: string]: unknown };
 export type Connection = {
   send: (action: Action, state: Record<string, unknown>) => void;
 };

libs/ngrx-toolkit/src/lib/devtools/tests/action-name.spec.ts

@@ -45,4 +45,29 @@ describe('updateState', () => {
       { shop: { name: 'i4' } },
     );
   });
+
+  it('should set and send an action object', () => {
+    const { sendSpy } = setupExtensions();
+
+    const Store = signalStore(
+      { providedIn: 'root' },
+      withDevtools('shop'),
+      withState({ name: 'Car' }),
+      withMethods((store) => ({
+        setName(name: string) {
+          updateState(store, { type: 'Set Name', name }, { name });
+        },
+      })),
+    );
+    const store = TestBed.inject(Store);
+    TestBed.flushEffects();
+
+    store.setName('i4');
+    TestBed.flushEffects();
+
+    expect(sendSpy).toHaveBeenLastCalledWith(
+      { type: 'Set Name', name: 'i4' },
+      { shop: { name: 'i4' } },
+    );
+  });
 });

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

@@ -28,6 +28,7 @@ const testEvents = eventGroup({
   source: 'Spec Store',
   events: {
     bump: type<void>(),
+    bookSelected: type<{ bookId: string }>(),
   },
 });
 
@@ -79,6 +80,29 @@ describe('withTrackedReducer', () => {
     );
   });
 
+  it('should send event payload to devtools when using tracked reducer', () => {
+    const { sendSpy, withBasicStore } = setup();
+
+    const Store = signalStore(
+      { providedIn: 'root' },
+      withBasicStore('store'),
+      withTrackedReducer(
+        on(testEvents.bookSelected, ({ payload }) => ({
+          count: Number(payload.bookId),
+        })),
+      ),
+    );
+
+    TestBed.inject(Store);
+
+    dispatchBookSelectedEvent('42');
+
+    expect(sendSpy).toHaveBeenLastCalledWith(
+      { type: '[Spec Store] bookSelected', payload: { bookId: '42' } },
+      { store: { count: 42 } },
+    );
+  });
+
   it('should distinguish between two synchronous state changes in reducer and normal patchState', () => {
     const { sendSpy, withBasicStore } = setup();
 
@@ -260,6 +284,10 @@ function dispatchBumpEvent() {
   TestBed.inject(Dispatcher).dispatch(testEvents.bump());
 }
 
+function dispatchBookSelectedEvent(bookId: string) {
+  TestBed.inject(Dispatcher).dispatch(testEvents.bookSelected({ bookId }));
+}
+
 function setup() {
   const { sendSpy } = setupExtensions();
 

libs/ngrx-toolkit/src/lib/devtools/update-state.ts

@@ -4,6 +4,7 @@ import {
   WritableStateSource,
 } from '@ngrx/signals';
 import { currentActionNames } from './internal/current-action-names';
+import { Action } from './internal/models';
 
 type PatchFn = typeof originalPatchState extends (
   arg1: infer First,
@@ -28,7 +29,7 @@ export const patchState: PatchFn = (state, action, ...rest) => {
  */
 export function updateState<State extends object>(
   stateSource: WritableStateSource<State>,
-  action: string,
+  action: string | Action,
   ...updaters: Array<
     Partial<NoInfer<State>> | PartialStateUpdater<NoInfer<State>>
   >

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

@@ -39,7 +39,7 @@ export function withTrackedReducer<State extends object>(
             const result = caseReducer.reducer(event, state);
             const updaters = Array.isArray(result) ? result : [result];
 
-            updateState(store, event.type, ...updaters);
+            updateState(store, event, ...updaters);
           }),
         ),
       ),