@ngxs-labs/select-snapshot

---

Flexibile decorator, an alternative for the @Select but selects a snapshot of the state

📦 Install

To install @ngxs-labs/select-snapshot run the following command:

npm install @ngxs-labs/select-snapshot
# of if you use yarn
yarn add @ngxs-labs/select-snapshot

🔨 Usage

Import the NgxsSelectSnapshotModule into your root application module:

import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';
import { NgxsSelectSnapshotModule } from '@ngxs-labs/select-snapshot';

@NgModule({
  imports: [
    NgxsModule.forRoot(states),
    NgxsSelectSnapshotModule.forRoot()
  ]
})
export class AppModule {}

Selecting snapshot

The @SelectSnapshot is just a simple decorator same as @Select. It allows you to decorate properties of your classes applying new getter and lets you to avoid injecting Store class everywhere. Simple example, let's create some tiny pandas state:

import { State, Action, StateContext } from '@ngxs/store';

class AddPanda {
  public static type = '[Pandas] Add panda';
  constructor(public panda: string) {}
}

@State<string[]>({
  name: 'pandas',
  defaults: []
})
export class PandasState {
  @Action(AddPanda)
  public addPanda({ getState, setState }: StateContext<string[]>, { panda }: AddPanda): void {
    const pandas = getState();
    setState([...pandas, panda]);
  }
}

Assume you've provided this state into your root NgxsModule and want already to try the @SelectSnapshot decorator:

import { Component } from '@angular/core';
import { SelectSnapshot } from '@ngxs-labs/select-snapshot';

import { PandasState } from './pandas.state';

@Component({
  selector: 'app-root',
  template: `
    <app-panda *ngFor="let panda of pandas" [panda]="panda"></app-panda>
  `
})
export class AppComponent {
  @SelectSnapshot(PandasState)
  public pandas: string[];  
}

The @SelectSnapshot decorator has the same API as the @Select decorator. It accepts state class, selector function, string or nothing as an argument.