fix(store-devtools): resolve extension dispatcher payloads with configured action creators

The extension serializes action creators with JSON.stringify, so passing creator functions directly produced null entries in its dispatcher, and NgRx createAction creators are anonymous functions with no usable name. Dispatching also failed: the extension forwards dispatcher payloads ({ selected, args }) to connect() subscribers as-is, and unwrapAction only handled string payloads, so the payload was dispatched as an action without a type.

Normalize the configured creators into the { name, func, args } shape the extension renders (record keys or the creator's type become the display names), and resolve { selected, args } payloads back through the configured creators when the extension dispatches.

Author: Arul1998

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

@@ -181,7 +181,40 @@ describe('DevtoolsExtension', () => {
     // Subscription needed or else extension connection will not be established.
     devtoolsExtension.actions$.subscribe(() => null);
     expect(reduxDevtoolsExtension.connect).toHaveBeenCalledWith(
-      expect.objectContaining({ actionCreators: [bookRented, bookReturned] })
+      expect.objectContaining({
+        actionCreators: [
+          { name: '[Books] Rent', func: bookRented, args: ['props'] },
+          { name: '[Books] Return', func: bookReturned, args: ['props'] },
+        ],
+      })
+    );
+  });
+
+  it('should connect with action creators named by record keys', () => {
+    const bookRented = createAction(
+      '[Books] Rent',
+      props<{ id: number; customerId: number }>()
+    );
+    const allBooksReturned = createAction('[Books] Return All');
+
+    const { devtoolsExtension, reduxDevtoolsExtension } = testSetup({
+      config: createConfig({
+        actionCreators: {
+          rentBook: bookRented,
+          returnAllBooks: allBooksReturned,
+        },
+      }),
+    });
+
+    // Subscription needed or else extension connection will not be established.
+    devtoolsExtension.actions$.subscribe(() => null);
+    expect(reduxDevtoolsExtension.connect).toHaveBeenCalledWith(
+      expect.objectContaining({
+        actionCreators: [
+          { name: 'rentBook', func: bookRented, args: ['props'] },
+          { name: 'returnAllBooks', func: allBooksReturned, args: [] },
+        ],
+      })
     );
   });
 
@@ -245,6 +278,85 @@ describe('DevtoolsExtension', () => {
     });
   }
 
+  describe('actions dispatched with configured action creators', () => {
+    const bookRented = createAction(
+      '[Books] Rent',
+      props<{ id: number; customerId: number }>()
+    );
+    const allBooksReturned = createAction('[Books] Return All');
+    const booksSearched = createAction(
+      '[Books] Search',
+      (query: string, page: number) => ({ query, page })
+    );
+
+    function dispatchFromExtension(
+      config: StoreDevtoolsConfig,
+      payload: unknown
+    ) {
+      const { devtoolsExtension, extensionConnection } = testSetup({ config });
+      let unwrappedAction: Action | undefined = undefined;
+      devtoolsExtension.actions$.subscribe((action) => {
+        return (unwrappedAction = action);
+      });
+
+      const [callback] = extensionConnection.subscribe.mock.lastCall;
+      callback({ type: ExtensionActionTypes.START });
+      callback({ type: ExtensionActionTypes.ACTION, payload });
+      return unwrappedAction;
+    }
+
+    it('should create the action with the entered props', () => {
+      const unwrappedAction = dispatchFromExtension(
+        createConfig({ actionCreators: [bookRented, allBooksReturned] }),
+        {
+          name: '[Books] Rent(props)',
+          selected: 0,
+          args: ['{ id: 5, customerId: 12 }'],
+          rest: '',
+        }
+      );
+      expect(unwrappedAction).toEqual({
+        type: '[Books] Rent',
+        id: 5,
+        customerId: 12,
+      });
+    });
+
+    it('should create an action without props', () => {
+      const unwrappedAction = dispatchFromExtension(
+        createConfig({ actionCreators: [bookRented, allBooksReturned] }),
+        { name: '[Books] Return All()', selected: 1, args: [], rest: '' }
+      );
+      expect(unwrappedAction).toEqual({ type: '[Books] Return All' });
+    });
+
+    it('should create an action from a function-style creator with rest args', () => {
+      const unwrappedAction = dispatchFromExtension(
+        createConfig({ actionCreators: { searchBooks: booksSearched } }),
+        {
+          name: 'searchBooks(args)',
+          selected: 0,
+          args: [],
+          rest: '["tolkien", 3]',
+        }
+      );
+      expect(unwrappedAction).toEqual({
+        type: '[Books] Search',
+        query: 'tolkien',
+        page: 3,
+      });
+    });
+
+    it('should pass the payload through when the selected index is unknown', () => {
+      const payload = { name: 'unknown()', selected: 99, args: [], rest: '' };
+      const unwrappedAction = dispatchFromExtension(
+        createConfig({ actionCreators: [bookRented] }),
+        payload
+      );
+      expect(unwrappedAction).toEqual(payload);
+    });
+  });
+
   describe('notify', () => {
     it('should send notification with default options', () => {
       const { devtoolsExtension, reduxDevtoolsExtension } = testSetup({

modules/store-devtools/src/extension.ts

@@ -60,9 +60,90 @@ export interface ReduxDevtoolsExtensionConfig {
   serialize?: boolean | SerializationOptions;
   trace?: boolean | (() => string);
   traceLimit?: number;
-  actionCreators?: ActionCreator[] | Record<string, ActionCreator>;
+  actionCreators?: ActionCreatorDescriptor[];
 }
 
+/**
+ * The shape the Redux DevTools extension expects action creators to be in.
+ * The extension serializes the entries with `JSON.stringify` (keeping `name`
+ * and `args` to render its dispatcher) and refers back to an entry by its
+ * index (`selected`) when an action is dispatched from the extension.
+ */
+export interface ActionCreatorDescriptor {
+  name: string;
+  func: ActionCreator;
+  args: string[];
+}
+
+/**
+ * The payload the extension sends when an action is dispatched from its
+ * dispatcher using one of the configured action creators. `selected` is the
+ * index of the action creator and `args` contains the entered arguments as
+ * strings of JavaScript.
+ */
+interface ActionCreatorPayload {
+  name: string;
+  selected: number;
+  args: string[];
+  rest: string;
+}
+
+function isActionCreatorPayload(
+  action: unknown
+): action is ActionCreatorPayload {
+  return (
+    typeof action === 'object' &&
+    action !== null &&
+    !('type' in action) &&
+    typeof (action as ActionCreatorPayload).selected === 'number' &&
+    Array.isArray((action as ActionCreatorPayload).args)
+  );
+}
+
+/**
+ * Parse the parameter names out of an action creator so the extension can
+ * render input fields for them in its dispatcher.
+ */
+function getActionCreatorArgs(actionCreator: ActionCreator): string[] {
+  const source = String(actionCreator);
+  const parenthesizedArgs = source.match(/^[^(]*\(([^)]*)\)/);
+  if (!parenthesizedArgs) {
+    // arrow function with a single parameter without parentheses
+    const singleArg = source.match(/^\s*([^=\s(]+)\s*=>/);
+    return singleArg ? [singleArg[1]] : [];
+  }
+  return parenthesizedArgs[1]
+    .split(',')
+    .map((arg) =>
+      arg
+        .replace(/^\s*\.{3}/, '')
+        .split('=')[0]
+        .trim()
+    )
+    .filter((arg) => arg !== '');
+}
+
+function getActionCreatorDescriptors(
+  actionCreators: ActionCreator[] | Record<string, ActionCreator>
+): ActionCreatorDescriptor[] {
+  if (Array.isArray(actionCreators)) {
+    return actionCreators.map((actionCreator) => ({
+      name: actionCreator.type || actionCreator.name || 'anonymous',
+      func: actionCreator,
+      args: getActionCreatorArgs(actionCreator),
+    }));
+  }
+  return Object.keys(actionCreators).map((name) => ({
+    name,
+    func: actionCreators[name],
+    args: getActionCreatorArgs(actionCreators[name]),
+  }));
+}
+
+// indirect eval according to https://esbuild.github.io/content-types/#direct-eval
+const evalArg = (arg: string): unknown =>
+  arg === '' ? undefined : (0, eval)(`(${arg})`);
+
 export interface ReduxDevtoolsExtension {
   connect(
     options: ReduxDevtoolsExtensionConfig
@@ -74,6 +155,7 @@ export interface ReduxDevtoolsExtension {
 export class DevtoolsExtension {
   private devtoolsExtension: ReduxDevtoolsExtension;
   private extensionConnection!: ReduxDevtoolsExtensionConnection;
+  private readonly actionCreatorDescriptors?: ActionCreatorDescriptor[];
 
   liftedActions$!: Observable<any>;
   actions$!: Observable<any>;
@@ -87,6 +169,9 @@ export class DevtoolsExtension {
     private dispatcher: DevtoolsDispatcher
   ) {
     this.devtoolsExtension = devtoolsExtension;
+    this.actionCreatorDescriptors = config.actionCreators
+      ? getActionCreatorDescriptors(config.actionCreators)
+      : undefined;
     this.createActionStreams();
   }
 
@@ -248,8 +333,27 @@ export class DevtoolsExtension {
   }
 
   private unwrapAction(action: Action) {
-    // indirect eval according to https://esbuild.github.io/content-types/#direct-eval
-    return typeof action === 'string' ? (0, eval)(`(${action})`) : action;
+    if (typeof action === 'string') {
+      // indirect eval according to https://esbuild.github.io/content-types/#direct-eval
+      return (0, eval)(`(${action})`);
+    }
+    // When action creators are configured, the extension dispatches them as a
+    // `{ selected, args }` payload that refers back to the configured action
+    // creators instead of a ready-made action.
+    if (this.actionCreatorDescriptors && isActionCreatorPayload(action)) {
+      const descriptor = this.actionCreatorDescriptors[action.selected];
+      if (descriptor) {
+        const args = action.args.map(evalArg);
+        if (action.rest) {
+          const rest = evalArg(action.rest);
+          if (Array.isArray(rest)) {
+            args.push(...rest);
+          }
+        }
+        return descriptor.func(...args);
+      }
+    }
+    return action;
   }
 
   private getExtensionConfig(config: StoreDevtoolsConfig) {
@@ -271,8 +375,8 @@ export class DevtoolsExtension {
     if (config.maxAge !== false /* support === 0 */) {
       extensionOptions.maxAge = config.maxAge;
     }
-    if (config.actionCreators) {
-      extensionOptions.actionCreators = config.actionCreators;
+    if (this.actionCreatorDescriptors) {
+      extensionOptions.actionCreators = this.actionCreatorDescriptors;
     }
     return extensionOptions;
   }

projects/www/src/app/pages/guide/store-devtools/config.md

@@ -54,6 +54,8 @@ function - called for every action before sending, takes state and action object
 
 array or object of action creators to make available in the extension's dispatcher, so actions can be dispatched manually from the extension, [more information here](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md#actioncreators).
 
+When an array is given, the creators are listed in the dispatcher under their action type. When an object is given (for example an action group created with `createActionGroup`), the creators are listed under their keys.
+
 ```typescript
 const bookRented = createAction(
   '[Books] Rent',
@@ -65,8 +67,14 @@ const bookReturned = createAction(
 );
 
 provideStoreDevtools({
+  // listed as '[Books] Rent' and '[Books] Return'
   actionCreators: [bookRented, bookReturned],
 });
+
+provideStoreDevtools({
+  // listed as 'rentBook' and 'returnBook'
+  actionCreators: { rentBook: bookRented, returnBook: bookReturned },
+});
 ```
 
 ### `connectInZone`