NGXS dispatch run all action for state

Question

I have a strange problem with ngxs and dispatch functions. When I create a new instance of Action class in dispatch function, all function w annotation @Action will be executed. Anyone has an idea why?

And this is my product.state.ts

export class ProductStateModel {
    public pageProduct: PageProduct;
    public page: number;
    public size: number;
    public productDetails: Product;
}

@State<ProductStateModel>({
    name: 'product',
    defaults: {
        pageProduct: {},
        page: 0,
        size: 10,
        productDetails: null
    }
})
export class ProductState {
    constructor(public productController: ProductControllerService) { }

@Action(CreateProductAction)
createProduct(ctx: StateContext<ProductStateModel>, { name, ean13, description, blob, price, quantity }: CreateProductAction) {
    console.log('createProduct')
    if (name) {
        return this.productController.saveProductUsingPOST({ product: { name, ean13, description, price, quantity }, multipartFile: blob }).pipe(
            tap(response => console.log(response))
        )
    }
}


@Action(LoadProductsPageAction)
loadProductPage(ctx: StateContext<ProductStateModel>, { page, size }: LoadProductsPageAction) {
    console.log('loadProductPage')
    if (page != null)
        return this.productController.getProductPageUsingGET({ size, page }).pipe(
            tap(response => ctx.patchState({ pageProduct: response, page, size }))
        )
}

@Action(DeleteProductAction)
deleteProduct(ctx: StateContext<ProductStateModel>, { id }: DeleteProductAction) {
    console.log('deleteProduct')
    if (id != null)
        return this.productController.removeByProductIdUsingDELETE(id).pipe(
            tap(response => {
                const page = ctx.getState().page
                const size = ctx.getState().size
                ctx.dispatch(new LoadProductsPageAction(page, size))
            })
        )
}

@Action(GetProductDetailsAction)
getProductDetails(ctx: StateContext<ProductStateModel>, { id }: GetProductDetailsAction) {
    console.log('getProductDetails')
    return this.productController.findByIdProductUsingGET(id).pipe(
        tap(response => ctx.patchState({ productDetails: response })
        ))
}

}

And in product.actions.ts I declared all class for Action.

And in module I added this: NgxsModule.forRoot([ProductState])

And in component I run this code this.store.dispatch(new LoadProductsPageAction(0, 10))

And this is product.actions.ts file:

export class LoadProductsPageAction {
  static readonly type: '[Products] LoadProductPageAction';
  constructor(public page: number, public size: number) { }
}

export class CreateProductAction {
  static readonly type: '[Products] CreateProductAction';
  constructor(public name: string, public ean13: string, public description: string, public price: number, public quantity: number, public blob: Blob) { }
}

export class DeleteProductAction {
  static readonly type: '[Product] DeleteproductAction';
  constructor(public id: number) { }
}

export class GetProductDetailsAction {
  static readonly type: '[Product] GetProductDetailsAction';
  constructor(public id: number) { }
}

Evry time in dedux console I see update action and I haven't it

Answer 1

All of your actions have no type defined, and are most likely matching all @Action() decorators.

Change this:

export class LoadProductsPageAction {
  static readonly type: '[Products] LoadProductPageAction';
  constructor(public page: number, public size: number) { }
}

To this:

export class LoadProductsPageAction {
  static readonly type: string = '[Products] LoadProductPageAction';
                        // ^^^^^ you must assign a value
  constructor(public page: number, public size: number) { }
}

You didn't assign a string value to the type property.