Skip to content

Commit 0d5a886

Browse files
committed
docs: add more devtools reducer details
1 parent 7bf37a9 commit 0d5a886

File tree

1 file changed

+26
-4
lines changed

1 file changed

+26
-4
lines changed

docs/docs/with-devtools.md

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,8 @@ title: withDevtools()
66
import { withDevtools } from '@angular-architects/ngrx-toolkit';
77
```
88

9-
<!-- TODO - add backported version -->
10-
119
:::info
12-
Devtools integration with `@ngrx/signals/events` is now available starting in version 20.TODO
10+
Devtools integration with `@ngrx/signals/events` is now available starting in version 20.7, via [`withTrackedReducer`](#events-tracking-withtrackedreducer).
1311
:::
1412

1513
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
186184
// Must have all three, or runtime errors for thee!
187185
import { withTrackedReducer, withGlitchTracking, withDevtools } from '@angular-architects/ngrx-toolkit';
188186

189-
const Store = signalStore({ providedIn: 'root' }, withDevtools('store', withGlitchTracking()), withTrackedReducer());
187+
export const bookEvents = eventGroup({
188+
source: 'Book Store',
189+
events: {
190+
loadBooks: type<void>(),
191+
},
192+
});
193+
194+
const Store = signalStore(
195+
{ providedIn: 'root' },
196+
withDevtools('book-store-events', withGlitchTracking()),
197+
withState({
198+
books: [] as Book[],
199+
}),
200+
withTrackedReducer(
201+
// `[Book Store] loadBooks` will show up in the devtools
202+
on(bookEvents.loadBooks, () => ({
203+
books: mockBooks,
204+
})),
205+
),
206+
withHooks({
207+
onInit() {
208+
injectDispatch(bookEvents).loadBooks();
209+
},
210+
}),
211+
);
190212
```
191213

192214
## Disabling Devtools in production

0 commit comments

Comments
 (0)