docs: add more devtools reducer details

Author: michael-small

docs/docs/with-devtools.md

@@ -6,10 +6,8 @@ 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
+Devtools integration with `@ngrx/signals/events` is now available starting in version 20.7, via [`withTrackedReducer`](#events-tracking-withtrackedreducer).
 :::
 
 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).
@@ -186,7 +184,31 @@ To use it
 // 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());
+export const bookEvents = eventGroup({
+  source: 'Book Store',
+  events: {
+    loadBooks: type<void>(),
+  },
+});
+
+const Store = signalStore(
+  { providedIn: 'root' },
+  withDevtools('book-store-events', withGlitchTracking()),
+  withState({
+    books: [] as Book[],
+  }),
+  withTrackedReducer(
+    // `[Book Store] loadBooks` will show up in the devtools
+    on(bookEvents.loadBooks, () => ({
+      books: mockBooks,
+    })),
+  ),
+  withHooks({
+    onInit() {
+      injectDispatch(bookEvents).loadBooks();
+    },
+  }),
+);
 ```
 
 ## Disabling Devtools in production