Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions docs/docs/with-devtools.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Collaborator

Choose a reason for hiding this comment

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

That would be v21.0 and v20.6.

Choose a reason for hiding this comment

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

But we are backporting this to v20 right? 05a5ad5

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yes, yes and it should be 20.7 (20.6 is already out)...sorry

:::

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:
Expand Down Expand Up @@ -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());
Copy link
Collaborator

Choose a reason for hiding this comment

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

can we maybe add one state updater in the withTrackedReducer along a comment that the particular event name will show up in the devtools?

```

## 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.
Expand Down