docs(devtools): add section for withTrackedReducer

Author: michael-small

docs/docs/with-devtools.md

@@ -6,6 +6,12 @@ title: withDevtools()
 import { withDevtools } from '@angular-architects/ngrx-toolkit';
 ```
 
+<!-- TODO - add backported version -->
+
+:::info
+Devtools integration with `@ngrx/signals/events` is now available starting in version 20.TODO
+:::
+
 Redux Devtools is a powerful browser extension tool, that allows you to inspect every change in your stores. Originally, it was designed for Redux, but it can also be used with the SignalStore. You can download it for Chrome [here](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd).
 
 To use the Devtools, you need to add the `withDevtools()` extension to your SignalStore:
@@ -165,6 +171,24 @@ const Store = signalStore(
 );
 ```
 
+## Events tracking: `withTrackedReducer`
+
+`withTrackedReducer` tracks state changes within the events
+plugin. This utility automatically derives the event name, streamlining
+the tracking process.
+
+To use it
+
+1. _Replace usages of `withReducer` with `withTrackedReducer`_. Note: native `withReducer` support is planned for the future, but that requires upstream support from `@ngrx/signals`.
+2. _[`withGlitchTracking`](#withglitchtracking) must be specified within `withDevtools`_. If `withTrackedReducer` is used without the devtools and glitch tracking, runtime errors will be thrown.
+
+```ts
+// Must have all three, or runtime errors for thee!
+import { withTrackedReducer, withGlitchTracking, withDevtools } from '@angular-architects/ngrx-toolkit';
+
+const Store = signalStore({ providedIn: 'root' }, withDevtools('store', withGlitchTracking()), withTrackedReducer());
+```
+
 ## Disabling Devtools in production
 
 `withDevtools()` is by default enabled in production mode, if you want to tree-shake it from the application bundle you need to abstract it in your environment file.