NGXS调度为状态运行所有操作

Posted 2021-04-09

我对ngxs和调度功能有一个奇怪的问题。当我在分派函数中创建Action类的新实例时，将执行所有带有注解@Action的函数。有人知道为什么吗？

这是我的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 })
        ))
}

}

并且在product.actions.ts中，我声明了Action的所有类。

并且在模块中，我添加了这个：NgxsModule.forRoot([ProductState])

并且在组件中，我运行此代码this.store.dispatch(new LoadProductsPageAction(0, 10))

这是product.actions.ts文件：

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) { }
}

在dedux控制台中等待时间，我看到了更新操作，但是还没有

答案

您的所有动作均未定义type，并且很可能matching所有@Action()装饰器。

更改此：

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

为此：

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

您没有为type属性分配字符串值。