Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ngxs-labs/dispatch-decorator

Package Overview
Dependencies
Maintainers
8
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ngxs-labs/dispatch-decorator

To install the `@ngxs-labs/dispatch-decorator` run the following command:

  • 3.0.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
8
Created
Source


Distribution for separation of concern between the state management and the view

NPM License

This package simplifies the dispatching process. You shouldn't care about Store service injection as we provide a more declarative way to dispatch events out of the box.

📦 Install

To install the @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 the 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 also be 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 {
  // `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 regular 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 cancelling previous requests like in a typeahead. Given the following example:

@Component({ ... })
export class NovelsComponent {
  @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:

@Component({ ... })
export class NovelsComponent {
  @Dispatch({ cancelUncompleted: true }) searchNovels = (query: string) =>
    this.novelsService.getNovels(query).pipe(map(novels => new SetNovels(novels)));

  constructor(private novelsService: NovelsService) {}
}

Keywords

FAQs

Package last updated on 06 Jun 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc