Skip to content

feat(store-devtools): add actionCreators config option - #5194

Merged
timdeschryver merged 5 commits into
ngrx:mainfrom
Arul1998:feat/store-devtools-action-creators
Jul 25, 2026
Merged

feat(store-devtools): add actionCreators config option#5194
timdeschryver merged 5 commits into
ngrx:mainfrom
Arul1998:feat/store-devtools-action-creators

Conversation

@Arul1998

Copy link
Copy Markdown
Contributor

Allow action creators to be passed to the Redux DevTools extension so actions can be dispatched manually from the extension's dispatcher.

Closes #4038

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

There is no way to make action creators available in the Redux DevTools extension's dispatcher. Dispatching an action manually from the extension requires writing the action as a JSON string by hand each time, which is tedious and error-prone.

Closes #4038

What is the new behavior?

StoreDevtoolsConfig accepts a new optional actionCreators option (an array or object of action creators, e.g. created with createAction). It is passed through to the Redux DevTools extension's connect/send options, so the extension's dispatcher lists the app's actions and they can be dispatched manually from the DevTools UI.

const bookRented = createAction('[Books] Rent', props<{ id: number }>());
const bookReturned = createAction('[Books] Return', props<{ id: number }>());

provideStoreDevtools({
  actionCreators: [bookRented, bookReturned],
});

The option was requested in #4038 and corresponds to the extension's actionCreators argument.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

The option is optional and is omitted from the extension config when not provided, so existing setups are unaffected.

Other information

The feature was greenlit by @timdeschryver in the issue thread. Docs added to the store-devtools instrumentation options guide.

Allow action creators to be passed to the Redux DevTools extension so actions can be dispatched manually from the extension's dispatcher.

Closes ngrx#4038

@timdeschryver timdeschryver left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you take another look at this please?
It doesn't seem to work, feel free to use the example-app as playground.

Arul1998 added 3 commits July 20, 2026 18:32
…gured 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.
@Arul1998

Copy link
Copy Markdown
Contributor Author

Thanks for catching this @timdeschryver you were right, it didn't work. Two problems:

  1. The extension serializes the configured action creators with JSON.stringify to render its dispatcher, so passing creator functions straight through produced null entries (and NgRx creators are anonymous functions, so there were no usable names either).
  2. Dispatching from the extension failed entirely: for connect() subscribers the extension forwards the dispatcher payload ({ selected, args }) as-is it only resolves it into a real action in its Redux enhancer path and unwrapAction only handled string payloads, so the payload object was dispatched as an action without a type.

Reworked in the latest commits:

  • The configured creators are normalized into the { name, func, args } shape the dispatcher renders. Record keys become the display names, so action groups work directly (e.g. actionCreators: FindBookPageActions lists searchBooks); for arrays the creator's type is used.
  • unwrapAction resolves { selected, args } payloads back through the configured creators, so dispatching from the extension now produces the real action.

Verified in the example-app: with actionCreators: FindBookPageActions, searchBooks shows up in the extension's dispatcher and dispatching it with { query: "tolkien" } triggers the search. Added specs covering the dispatch round trip (props, no-props, function-style creators with rest args, and unknown selected passthrough).

Also merged main and fixed a mock.lastCall destructuring that failed the stricter type-checking (it was in the original commit too).

@Arul1998
Arul1998 requested a review from timdeschryver July 20, 2026 19:00
Comment thread projects/www/src/app/pages/guide/store-devtools/config.md Outdated

@timdeschryver timdeschryver left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @Arul1998 !

@timdeschryver
timdeschryver merged commit 69dbe47 into ngrx:main Jul 25, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add actionCreators to StoreDevToolsOptions

3 participants