import { Injectable } from '@angular/core';
import { State, Action, StateContext } from '@ngxs/store';
import { patch, append, removeItem, insertItem, updateItem } from '@ngxs/store/operators';
export interface AnimalsStateModel {
static readonly type = '[Animals] Add zebra';
constructor(public payload: string) {}
export class RemovePanda {
static readonly type = '[Animals] Remove panda';
constructor(public payload: string) {}
export class ChangePandaName {
static readonly type = '[Animals] Change panda name';
constructor(public payload: { name: string; newName: string }) {}
@State<AnimalsStateModel>({
zebras: ['Jimmy', 'Jake', 'Alan'],
pandas: ['Michael', 'John']
export class AnimalsState {
addZebra(ctx: StateContext<AnimalsStateModel>, { payload }: AddZebra) {
zebras: append([payload])
removePanda(ctx: StateContext<AnimalsStateModel>, { payload }: RemovePanda) {
pandas: removeItem<string>(name => name === payload)
changePandaName(ctx: StateContext<AnimalsStateModel>, { payload }: ChangePandaName) {
pandas: updateItem<string>(name => name === payload.name, payload.newName)