@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.

[acampon-sw]

Really needing this, the only thing that is keeping our team away from using the signal store is that we are not able to track the state as easily as with the ngrx-rxjs based store.

[rainerhahnekamp]

@acampon-sw, have you tried out https://github.com/angular-architects/ngrx-toolkit?

[abu-osos]

@rainerhahnekamp for using that we need to install @ngrx/store as well, @ngrx/signals in not enough

[rainerhahnekamp]

@abu-osos, I really hope that this is not the case 😨. withDevtools only has a dependency to signals.

[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.

[alexander-kastil]

@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

[begrs]

I disagree with @markostanimirovic that a general overhaul of the Angular Devtools for signals would be as beneficial, as a direct integration into the Redux Devtools would be.
The best debugging experience with the full ngRx Store is, that you are able to track what changed precisely in which action(method).
Tracking only signal changes would help a bit, but you would not see which action was responsible for the change, only that the state changed in general.

There is also no easy way to add the functionality from outside. There is a withDevtools from the ngrx-toolkit, but it fails miserably to track method changes. However it does show the slice/store in the state tracking, which is already a huge help.

I took a crack at improving withMethods tracking, and made some success ( will edit this answer and post my hacky solution for anyone interested tomorrow), but tracking which method caused a state change is incredibly hard for rxMethods:

• If there are more than one patchState call
• or the patchState is delayed by an async operation before it.

The best approach, in my opinion, would be to fully integrate the devtools tracking into the main signal store. With 100% precision on which method caused the patchStates. It would require a context to be tracked for each rxMethod, and will probably take some time to implement. One of the 3 main reasons that I advise collegues to use ngRx is the good DevTools integration, as it literally cuts the time to track down inconsistencies in half in larger projects.

[rainerhahnekamp]

@begrs:

it fails miserably to track method changes

For the ngrx-toolkit, we would require direct access to patchState or a hook. That's not the case, so we can only create an effect on the store's signal and wait for the effect's execution. If there is one change, we'll probably don't track miserably. If there are multiple ones...well.

The toolkit has an updateState that wraps patchState and could be used for detailed tracking.

[brennohv]

I'm using updateState and I've noticed that it loses the signal store typing, it'd be great if it kept the store type. Other than that, great job.

[rainerhahnekamp]

Got it. Would it be possible for you to raise an issue here: https://github.com/angular-architects/ngrx-toolkit/issues

Just a quick note should be enough.

[brennohv]

Sure, meanwhile I got around this issue by encapsulating your function like this.

import { updateState } from '@angular-architects/ngrx-toolkit';
import { PartialStateUpdater, StateSignal } from '@ngrx/signals';
import { Prettify } from '@ngrx/signals/src/ts-helpers';

export function updateStateLib<State extends object>(
  stateSignal: StateSignal<State>,
  message: string,
  ...updaters: Array<
    Partial<Prettify<State>> | PartialStateUpdater<Prettify<State>>
  >
) {
  updateState(stateSignal, message, ...updaters);
}