Devtools
Plugin with integration:
Devtools Screenshot
npm install @ngxs/devtools-plugin --save-dev
# or if you are using yarn
yarn add @ngxs/devtools-plugin --dev
Add the
NgxsReduxDevtoolsPluginModule plugin to your root app module:import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
@NgModule({
imports: [NgxsModule.forRoot([]), NgxsReduxDevtoolsPluginModule.forRoot()],
})
export class AppModule {}
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 productionmaxAge: Max number of entries to keep.latency: If more than one action is dispatched in the indicated interval, all new actions will be collected and sent at once. It is the joint between performance and speed. When set to 0, all actions will be sent instantly. Set it to a higher value when experiencing perf issues (also maxAge to a lower value). Default is 500 ms.actionsBlacklist: string or array of strings as regex - actions types to be hidden in the monitors (while passed to the reducers). If actionsWhitelist specified, actionsBlacklist is ignored.actionsWhitelist: string or array of strings as regex - actions types to be shown in the monitors (while passed to the reducers). If actionsWhitelist specified, actionsBlacklist is ignored.predicate: called for every action before sending, takes state and action object, and returns true in case it allows sending the current data to the monitor. Use it as a more advanced version of actionsBlacklist/actionsWhitelist parametersactionSanitizer: Reformat actions before sending to dev toolsstateSanitizer: Reformat state before sending to devtoolstrace: if set totrue, will include stack trace for every dispatched action, so you can see it in trace tab jumping directly to that part of codetraceLimit: maximum stack trace frames to be stored (in case trace option was provided as true)
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.
Last modified 2mo ago