使用NgRx完成前一个事件后如何发出一个事件？

Question

我是这项技术的新手，我正在研究一个场景很糟糕的项目。

表架构：

tbl.Product

id
产品名称
brand_id [FK]

tbl.Brand

id
品牌名称

在此过程中，提交时，我首先添加BrandName并获取新添加的品牌记录ID，然后在带有brand_id的产品表中插入完整记录。

Submit(){

this.saveBrand.emit(brand);
product.brand_id = brands.id;
this.saveProduct.emit(product);

}

为此，我正在使用NgRx商店。

Brand.effects.ts

addBrand$: Observable<Action> = this.actions$
    .pipe(ofType<Add>(BrandActionTypes.Add),
      switchMap(action => this.BrandService.addBrand(action.payload)),
     map((Brand: any) => new AddSuccess(Brand)),
      catchError(err => {
        toastr.error(`Could not add Brand.`);
        console.error(err);
        return of(new AddFail(err));
      })
    );

Product.effects.ts

addProduct$: Observable<Action> = this.actions$
    .pipe(ofType<Add>(ProductActionTypes.Add),
      switchMap(action => this.ProductService.addProduct(action.payload)),
     map((Product: any) => new AddSuccess(Product)),
      catchError(err => {
        toastr.error(`Could not add Product.`);
        console.error(err);
        return of(new AddFail(err));
      })
    );

同时执行这两个事件，同时发出（两者都不异步）。因此产品未获得brand_id。 我期望输出像这样。

Submit(){

this.saveBrand.emit(brand); 
product.brand_id = brands.id;
this.saveProduct.emit(product); \\hold until brand get added

}

Answer 1

调度动作是一个异步过程，这就是为什么未“填充”品牌ID的原因。 要解决您的问题，您可以做一些事情：

• 您的产品效果可以监听AddSuccess动作
• 使用一种效果来处理两个服务调用
• 拨打服务电话吗？

有关某些模式NgRx: Patterns and Techniques

的精彩文章