Skip to content

Conversation

wolfmanfx
Copy link
Collaborator

Summary

Adds withEventsTracking() as a DevTools feature and integrates it with withDevtools() so Redux DevTools shows meaningful event names from @ngrx/signals/events instead of the generic "Store Update".

Context

Debugging SignalStore reducers triggered by @ngrx/signals/events was difficult because DevTools labeled all updates as "Store Update". This resolves the request in #231 by inferring event names and surfacing them to DevTools.
Reference: #231 (comment)

Changes

  • Introduce withEventsTracking() as a DevTools feature:
    • Implemented via createDevtoolsFeature({ eventsTracking: true }).
  • Extend DevTools internal options:
    • DevtoolsOptions gains eventsTracking?: boolean.
    • DevtoolsInnerOptions gains eventsTracking: boolean.
  • Integrate with withDevtools():
    • When eventsTracking is enabled, subscribe to Events.on() via an internal rxMethod.
    • Push event type values into currentActionNames to be used as the next DevTools action label.
  • Keep existing DevTools behavior unchanged when the feature is not enabled.

Usage

export const BookStore = signalStore(
  withDevtools('book-store', withEventsTracking()),
  withState({ /* state */ }),
  withReducer(
    on(bookEvents.loadBooks, /* reducer */),
    on(bookEvents.bookSelected, /* reducer */),
  )
);

Compatibility

  • Angular 20+: Supported on main.
  • Backportable: Compatible with Angular 15–19 (no Angular 20+ only APIs used).
  • Breaking changes: None (opt‑in feature).

Testing

  • DevTools timeline now displays event names when using withEventsTracking().
  • No behavior changes for non‑opt‑in users.

Suggested commands:

pnpm install
pnpm -w lint
pnpm -w test
pnpm -w build

Documentation

  • Add a short section under DevTools docs showing withEventsTracking() usage and expectations.

Checklist

  • Conventional Commit title with monorepo scope
  • Public API unchanged for existing consumers; feature is opt‑in
  • No unintended exports
  • TypeScript strictness preserved

Linked Issues

Closes #231

withHooks,
withMethods,
} from '@ngrx/signals';
import { EventInstance, Events } from '@ngrx/signals/events';
Copy link
Collaborator

Choose a reason for hiding this comment

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

This is what I wanted to avoid by withEventsTracking. If you have an import in with-devtools.ts, you are pulling in the complete events library. What I had in mind, was to come up with a solution, where only the file withEventsTracking has the import to ngrx/signals/events. So if users don't call it, it will never be used.

withGlitchTracking is an example for that. Only it has the indirect import to watchState.

That would require a more plugin-based approach which is of course not easier....

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I reworked that part

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.

@ngrx/signals/events: How to display event name/type in Redux DevTools? Event name always: 'Store Update'
3 participants