NGXS 调度运行状态的所有动作

Question

我对 ngxs 和 dispatch 函数有一个奇怪的问题。当我在 dispatch 函数中创建 Action 类的新实例时，所有函数 w 注释 @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 控制台中，我都会看到更新操作，但我没有

Answer 1

您的所有操作都没有type定义，并且很可能与所有@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属性分配字符串值。