NgRx效果仅执行一次

Question

我单击了一个模态窗口，单击Add user按钮后，它在进行了一些内部调用（如检查textbox中的值的有效性）后，将值添加到了textbox中。 http调用是在效果中执行的，该效果仅在第一个条目时被调用。

问题在于，执行后端调用的效果仅执行一次。

模态模板：

<button class="close" mat-button (click)="closeDialog()">x</button>
<h1 mat-dialog-title>Share with other users</h1>
<div mat-dialog-content>
  <ng-container *ngFor="let principal of data.productList.sharedWith; trackBy: sharedPrincipalsTrackFunction">
    <p>{{principal.uid}} <button (click)="removeUserFromSharedProductList(data.productList.name, principal.uid)">x</button></p>
  </ng-container>
  <mat-form-field>
    <mat-label>Share with other users</mat-label>
    <input matInput [(ngModel)]="data.userId">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button class="btn btn-primary" mat-button (click)="addUserToProductList(data.productList.name, data.userId)" [disabled]="!data.userId">Add user</button>
</div>

组件的打字稿代码：

  addUserToProductList(productListName: string, userId: string) {
    this.productListService.shareProductList(productListName, userId);
    this.updateDialogData(userId);
  }

productListService.shareProductList：

  shareProductList(productListName: string, userId: string) {
    this._store.dispatch(
      ProductListActions.shareProductListWithUser({
        productListName: productListName,
        userId: userId
      })
    );
  }

效果：

  shareProductListWithUser$ = createEffect(() =>
    this._actions$.pipe(
      ofType(ProductListActions.shareProductListWithUser),
      mergeMap(action =>
        forkJoin(
          of(action.productListName),
          this._productListOccService.shareProductListWithUser(
            action.productListName,
            action.userId
          )
        )
      ),
      switchMap(([productListName, response]) => [
        ProductListActions.getMyProductLists(),
        ProductListActions.shareProductListWithUserSuccess({
          productListName: productListName,
          principalList: response
        })
      ]),
      catchError((error) => {
        console.log('Acelasi handler de kkt');
        return EMPTY;
      }))})
    )
  );

模块文件：

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    StoreModule.forFeature("productListState", productListReducer),
    EffectsModule.forFeature([ProductListEffects])
  ],
  providers: [ProductListOccService],
  entryComponents: []
})
export class PrtListStoreModule {}

我调试了这个，但是我不明白为什么效果只被调用一次。

Answer 1

问题出在catchError中，您需要在其后添加repeat才能再次启用效果。

      catchError((error) => { // <- closes the stream
        console.log('Acelasi handler de kkt');
        return EMPTY;
      }))}),
      repeat(), // <- resubscribes

理想情况下，将catchError放在.pipe的.shareProductListWithUser中，然后可以避免repeat，但是由于您对响应有依赖性，因此可以将代码保持原样并实现repeat的期望行为。