Devtools

Reference: Redux Devtools​
Plugin with integration:
​Chrome - Redux Devtools​
​Firefox - Redux Devtools​
Devtools Screenshot
Installation
1
npm install @ngxs/devtools-plugin --save-dev
2
​
3
# or if you are using yarn
4
yarn add @ngxs/devtools-plugin --dev
Copied!
Usage
Add the NgxsReduxDevtoolsPluginModule plugin to your root app module:
1
import { NgxsModule } from '@ngxs/store';
2
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
3
​
4
@NgModule({
5
  imports: [NgxsModule.forRoot([]), NgxsReduxDevtoolsPluginModule.forRoot()]
6
})
7
export class AppModule {}
Copied!
Options
The plugin supports the following options passed via the forRoot method:
name: Set the name by which this store instance is referenced in devtools (Default: 'NGXS')
disabled: Disable the devtools during production
maxAge: Max number of entries to keep.
actionSanitizer: Reformat actions before sending to dev tools
stateSanitizer: Reformat state before sending to devtools
Notes
You should always include the devtools as the last plugin in your configuration. For instance, if you were to include devtools before a plugin like the storage plugin, the initial state would not be reflected.

Logger

Storage

Last modified 4mo ago

Copy link

Contents