feat(devtools): add branded Action type and asAction helper

Author: sqrter

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

@@ -18,15 +18,17 @@ const dummyConnection: Connection = {
 
 function toDevtoolsAction(actions: (string | Action)[]): Action {
   if (!actions.length) {
-    return { type: 'Store Update' };
+    return { type: 'Store Update' } as Action;
   }
 
   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 };
+  return objects.length
+    ? ({ ...objects[0], type } as Action)
+    : ({ type } as Action);
 }
 
 /**

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

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

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

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { signalStore, withMethods, withState } from '@ngrx/signals';
-import { updateState } from '../update-state';
+import { asAction, updateState } from '../update-state';
 import { withDevtools } from '../with-devtools';
 import { setupExtensions } from './helpers.spec';
 
@@ -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, asAction({ 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/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,
@@ -19,6 +20,14 @@ export const patchState: PatchFn = (state, action, ...rest) => {
   updateState(state, action, ...rest);
 };
 
+/**
+ * Casts an object with a `type` property to an {@link Action}.
+ * Use this when you need to pass a structured action object to {@link updateState}.
+ */
+export function asAction<T extends { type: string }>(value: T): Action {
+  return value as unknown as Action;
+}
+
 /**
  * Wrapper of `patchState` for DevTools integration. Next to updating the state,
  * it also sends the action to the DevTools.
@@ -28,7 +37,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

@@ -3,7 +3,6 @@ import {
   EmptyFeatureResult,
   getState,
   PartialStateUpdater,
-  patchState,
   SignalStoreFeature,
   signalStoreFeature,
   type,
@@ -16,7 +15,7 @@ import {
 } from '@ngrx/signals/events';
 import { tap } from 'rxjs/operators';
 import { GLITCH_TRACKING_FEATURE } from './features/with-glitch-tracking';
-import { currentActionNames } from './internal/current-action-names';
+import { updateState, asAction } from './update-state';
 import { DEVTOOL_FEATURE_NAMES } from './with-devtools';
 
 export function withTrackedReducer<State extends object>(
@@ -40,8 +39,7 @@ export function withTrackedReducer<State extends object>(
             const result = caseReducer.reducer(event, state);
             const updaters = Array.isArray(result) ? result : [result];
 
-            currentActionNames.add(event);
-            patchState(store, ...updaters);
+            updateState(store, asAction(event), ...updaters);
           }),
         ),
       ),