@ngxs-labs/dispatch-decorator

---

Reusable logic for avoiding Store injection

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:

npm install @ngxs-labs/dispatch-decorator
# or if you use yarn
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 you have to create a state:

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);
  }
}

Register this state in NgxsModule and import this state and actions into your 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();
}

Dispatchers can be also asynchronous. They can return either Promise or `Observable. Asynchronous operations are handled outside Angular's zone, thus it doesn't affect performance:

export class AppComponent {
  // `ApiService` is defined somewhere
  constructor(private api: ApiService) {}

  @Dispatch()
  async setAppSchema() {
    const version = await this.api.getApiVersion();
    const schema = await this.api.getSchemaForVersion(version);
    return new SetAppSchema(schema);
  }

  // OR using lambda

  @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 previusly 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.