Distribution for separation of concern between the state management and the view
This package simplifies dispatching process, you shouldn't care about Store
service injection as we provide more declarative way to dispatch events out of the box.
📦 Install
To install @ngxs-labs/dispatch-decorator
run the following command:
yarn add @ngxs-labs/dispatch-decorator
🔨 Usage
Import the module into your root application module:
import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';
import { NgxsDispatchPluginModule } from '@ngxs-labs/dispatch-decorator';
@NgModule({
imports: [
NgxsModule.forRoot(states),
NgxsDispatchPluginModule.forRoot()
]
})
export class AppModule {}
Dispatch Decorator
@Dispatch()
is a function that allows you to decorate methods and properties of your classes. Firstly let's create our state for demonstrating purposes:
import { State, Action, StateContext } from '@ngxs/store';
export class Increment {
static readonly type = '[Counter] Increment';
}
export class Decrement {
static readonly type = '[Counter] Decrement';
}
@State<number>({
name: 'counter',
defaults: 0
})
export class CounterState {
@Action(Increment)
increment(ctx: StateContext<number>) {
ctx.setState(ctx.getState() + 1);
}
@Action(Decrement)
decrement(ctx: StateContext<number>) {
ctx.setState(ctx.getState() - 1);
}
}
After registering our state in the NgxsModule
we are ready to try the plugin out. Given the following component:
import { Component } from '@angular/core';
import { Select } from '@ngxs/store';
import { Dispatch } from '@ngxs-labs/dispatch-decorator';
import { Observable } from 'rxjs';
import { CounterState, Increment, Decrement } from './counter.state';
@Component({
selector: 'app-root',
template: `
<ng-container *ngIf="counter$ | async as counter">
<h1>{{ counter }}</h1>
</ng-container>
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>
`
})
export class AppComponent {
@Select(CounterState) counter$: Observable<number>;
@Dispatch() increment = () => new Increment();
@Dispatch() decrement = () => new Decrement();
}
As you may mention we don't have to inject the Store
class to dispatch those actions. The @Dispatch
decorator does it for you underneath. It gets the result of the function call and invokes store.dispatch(...)
under the hood.
Dispatchers can be also asynchronous. They can return either Promise
or Observable
. Asynchronous operations are handled outside of Angular's zone, thus it doesn't affect performance:
export class AppComponent {
constructor(private api: ApiService) {}
@Dispatch()
async setAppSchema() {
const version = await this.api.getApiVersion();
const schema = await this.api.getSchemaForVersion(version);
return new SetAppSchema(schema);
}
@Dispatch() setAppSchema = () =>
this.api.getApiVersion().pipe(
mergeMap(version => this.api.getSchemaForVersion(version)),
map(schema => new SetAppSchema(schema))
);
}
Notice that it doesn't matter if you use an arrow function or a normal class method.
Dispatching Multiple Actions
Dispatchers can return arrays. Actions will be handled synchronously one by one if their action handlers do synchronous job and vice versa if their handlers are asynchronous:
export class AppComponent {
@Dispatch() setLanguageAndNavigateHome = (language: string) => [
new SetLanguage(language),
new Navigate('/')
];
}
Canceling
If you have an async dispatcher, you may want to cancel a previous Observable
if the dispatcher has been invoked again. This is useful for canceling previous requests like in a typeahead. Given the following example:
export class NovelsFacade {
@Dispatch() searchNovels = (query: string) =>
this.novelsService
.getNovels(query)
.pipe(map(novels => new SetNovels(novels)));
constructor(private novelsService: NovelsService) {}
}
If we want to cancel previously uncompleted getNovels
request then we need to provide the cancelUncompleted
option:
export class NovelsFacade {
@Dispatch({ cancelUncompleted: true }) searchNovels = (query: string) =>
this.novelsService
.getNovels(query)
.pipe(map(novels => new SetNovels(novels)));
constructor(private novelsService: NovelsService) {}
}
Business Logic Decomposition with Facades
There is a great article about using facades and the @Dispatch
decorator together to mask interaction with more complex components behind the scenes.