Introduction
Next let's talk about plugins. Similar to Redux's meta reducers, we have a plugins interface that allows you to build a global plugin for your state.
All you have to do is provide a class to the
NGXS_PLUGINS token. If your plugins have options associated with it, we suggest defining an injection token and then a forRoot method on your module.Let's take a look at a basic example of a logger:
1
import { Injectable, Inject, NgModule } from '@angular/core';
2
import { NgxsPlugin, NGXS_PLUGINS } from '@ngxs/store';
3
​
4
export const NGXS_LOGGER_PLUGIN_OPTIONS = new InjectionToken('NGXS_LOGGER_PLUGIN_OPTIONS');
5
​
6
@Injectable()
7
export class LoggerPlugin implements NgxsPlugin {
8
constructor(@Inject(NGXS_LOGGER_PLUGIN_OPTIONS) private options: any) {}
9
​
10
handle(state, action, next) {
11
console.log('Action started!', state);
12
return next(state, action).pipe(
13
tap(result => {
14
console.log('Action happened!', result);
15
})
16
);
17
}
18
}
19
​
20
@NgModule()
21
export class NgxsLoggerPluginModule {
22
static forRoot(config?: any): ModuleWithProviders {
23
return {
24
ngModule: NgxsLoggerPluginModule,
25
providers: [
26
{
27
provide: NGXS_PLUGINS,
28
useClass: LoggerPlugin,
29
multi: true
30
},
31
{
32
provide: NGXS_LOGGER_PLUGIN_OPTIONS,
33
useValue: config
34
}
35
]
36
};
37
}
38
}
Copied!
You can also use pure functions for plugins. The above example in a pure function would look like this:
1
export function logPlugin(state, action, next) {
2
console.log('Action started!', state);
3
return next(state, action).pipe(tap(result) => {
4
console.log('Action happened!', result);
5
});
6
}
Copied!
NOTE: When providing a pure function make sure to use
useValue instead of useClass.To register a plugin with NGXS, import the plugin module in your module and optionally pass in the plugin options like this:
1
@NgModule({
2
imports: [NgxsModule.forRoot([ZooStore]), NgxsLoggerPluginModule.forRoot({})]
3
})
4
export class MyModule {}
Copied!
The method also works with
forFeature.Last modified 2yr ago
Copy link