@ngrx/signals: Add support for Redux DevTools

[rainerhahnekamp]

Which @ngrx/* package(s) are relevant/related to the feature request?

store

Information

One of the most requested features that was missing in the Component Store was its integration into DevTools. The SignalStore, unlike the global store, doesn't have a single state either.

To address this, I propose introducing an option called withDevTools(name: string). This option would define the "feature key" of the Store and determine how it appears in the DevTools.

If the name is used multiple times, it should be automatically indexed. For example, withDevTools('user') would result in entries like user(1), user(2), and so on.

Furthermore, I suggest adding an optional parameter to the $update function that allows developers to set the name of the action. If this parameter is omitted, the SignalStore should use the function's name as the action name. For instance, in the example below, the action name would be “addUser”.

Example:

import { signalStore, withMethods, withState } from '@ngrx/signals';
import {
  EmptyFeatureResult,
  SignalStoreFeature,
} from '../lib/signal-store-models';

declare function withDevTools(params: {
  name: string;
}): SignalStoreFeature<EmptyFeatureResult, EmptyFeatureResult>;

type User = { id: number; name: string };
type UsersState = { users: User[]; loading: boolean };

const UsersStore = signalStore(
  withDevTools({ name: 'users' }),
  withState<UsersState>({ users: [], loading: false }),
  withMethods(({ $update, users }) => {
    return {
      addUser(user: User): void {
        // $update method with optional action name
        $update((state) => ({ ...state }), 'addUser');
      },
    };
  })
);

If accepted, I would be happy to provide an initial PR.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[markostanimirovic]

I like the idea and it's possible to implement this plugin. However, we don't plan to have it in the core package. The main reason is that Angular Devtools will most likely provide support for signals, so we'll be able to track signalStore/State changes there. We don't know when will it happen, but this plugin may become obsolete quickly.

I'm going to convert this issue to a discussion.

[rainerhahnekamp]

As discussed, a good compromise could be to come up with a community plugin (outside of @ngrx/platform). If clearly communicated, that it is a temporary solution, it could be a handy feature.

[kobi2294]

love it.
If only there was an elegant way to add it to the component store

[rainerhahnekamp]

So the community contribution is underway: https://github.com/angular-architects/ngrx-toolkit

Therefore, I think we can close this discussion.

[arambazamba]

@rainerhahnekamp like the withRedux() very much ... Actually this should be part ob the main project

[rainerhahnekamp]

Thanks, it is still in the beta and will become stable in the next few weeks. Let's see where this goes...

[robmanganelly]

@rainerhahnekamp you guys rock <3