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

Question

我对 ngxs 和调度函数有一个奇怪的问题。当我在调度函数中创建一个新的 Action class 实例时，所有带有 @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 中我宣布所有 class 为行动。

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

在组件 I 运行中，此代码 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 属性分配字符串值。

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

NGXS dispatch run all action for state

angular

ngxs

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

NGXS dispatch run all action for state

angular

ngxs

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