State Management (NGXS)

Wprowadzenie

System używa NGXS (nie NgRx!) do zarządzania stanem aplikacji.

Struktura

// State
@State<BudgetStateModel>({
  name: 'budgets',
  defaults: { budgets: [], loading: false }
})
export class BudgetState {
  @Selector()
  static getBudgets(state: BudgetStateModel) {
    return state.budgets;
  }

  @Action(LoadBudgets)
  loadBudgets(ctx: StateContext<BudgetStateModel>) {
    return this.budgetService.getAll().pipe(
      tap(budgets => ctx.patchState({ budgets }))
    );
  }
}

Actions

export class LoadBudgets {
  static readonly type = '[Budget] Load';
}

Użycie w komponencie

export class BudgetListComponent {
  budgets$ = this.store.select(BudgetState.getBudgets);

  ngOnInit() {
    this.store.dispatch(new LoadBudgets());
  }
}

Dalsze zasoby

• Frontend
• Biblioteki