Perform an action when map finished with async function

Question

In this effect I’m getting product and if this product has “childProducts” it becomes array of products.

Then, on the map function there is a pop up modal for each of the products in the array.

I want to make some action when the map is finished with all products.

How it be achieved?

    @Effect()
    selectProductPage$ = this.actions$.ofType<SelectProduct>(OrderActionTypes.SelectProduct).pipe(
      map(action => action.payload),
      switchMap((product) => {
        const allTests = [product, ...(product.product.childProducts || [])].map(cloneDeep);
        return from(allProducts);
      }),
      map((product: any) => {
        // pop up modal for each product
      })
    );

this kind of depends a lot on how the modals are instantiated. but this seems like a very odd approach in any event. — bryan60, Dec 05 '19 at 15:31

score -1 · Answer 1 · answered Dec 05 '19 at 15:26

You can use tap rxjs operators to do some action after "map" finished.

So your code will become like

@Effect()
    selectProductPage$ = this.actions$.ofType<SelectProduct>OrderActionTypes.SelectProduct).pipe(
      map(action => action.payload),
      switchMap((product) => {
        const allTests = [product, ...(product.product.childProducts || [])].map(cloneDeep);
        return from(allProducts);
      }),
      map((product: any) => {
        // pop up modal for each product
      }),
      tap((result) => this.finishRequest(result)) // HERE IS THE CHANGE
    );

It hit the tap N times as the number of products before raising the modal window in map function... — eladr, Dec 05 '19 at 15:35

Perform an action when map finished with async function

1 Answers1