How to add null filter to below mergeMap?

Question

I wrote subscribe service and get value form that and after that call another API. but the first subscription API changed. Now value can be null. so, how can I handle that?. Now code came compile error in, oc.id, or can be null.

 getE$ = createEffect(() => this.actions$.pipe(
ofType(ActionType.A),
switchMapTo(this.store.select(selectP)),
mergeMap((oc) => this.reviewService.findByR(oc.id,
  new Date(new Date()),
  new Date(new Date()), 'A')
  .pipe(
    mergeMap(d => {
      return of(LoadSuccess({ reviews: getReviews(d) }));
    }
    ),
    catchError(error => {
      return of(LoadFailure({ error: error }));
    })
  )
)));

' map((oc: Oc) => oc),' I couldn't put filter but I put map between them, is it correct? — uma, Sep 13 '20 at 12:06
No that won't do what you want. That's an unsafe type conversion. Never put type annotations on the parameters of an **_inline_** callback function (you will see people doing it, specifically in Angular tutorials, and they are doing it wrong.). — Aluan Haddad, Sep 13 '20 at 12:07
You want this `import {filter} from 'rxjs/operators';` then in your method, `getE$ = createEffect(() => this.actions$.pipe( ofType(ActionType.A), switchMapTo(this.store.select(selectP)), filter((oc): oc is Oc => oc), mergeMap((oc) => this.reviewService.findByR(oc.id, new Date(new Date()), new Date(new Date()), 'A')` etc. — Aluan Haddad, Sep 13 '20 at 12:10
I added this 'filter(isNotNullOrUndefined)' :) it was gone that compile errrors ? is it ok ? — uma, Sep 13 '20 at 12:12
Yeah, that is actually more readable. I can't see your types, so I made a guess at what the filter should look like — Aluan Haddad, Sep 13 '20 at 12:12
Thank you , I can fix this as your help after long time. If you put it as answer,,,i will accept .https://stackoverflow.com/questions/63867586/how-to-write-below-code-using-mergemap-or-flatmap-or-some-better-way-with-rxjs-o . this another issue , had me still not answer. — uma, Sep 13 '20 at 12:14

score 1 · Accepted Answer · answered Sep 13 '20 at 12:32

To filter out the null values that the API may now return, we want to place a call to the filter operator in our pipeline between the calls to switchMapTo and mergeMap.

import {filter} from 'rxjs/operators';

getE$ = createEffect(() => this.actions$.pipe(
    ofType(ActionType.A),
    switchMapTo(this.store.select(selectP)),
    // remove `null` or `undefined` elements
    filter(notNullOrUndefined)
    // safely dereference `oc`
    mergeMap(oc => this.reviewService.findByR(oc.id,
            new Date(new Date()),
            new Date(new Date()), 'A'
        )
        .pipe(
            mergeMap(d => of(LoadSuccess({ reviews: getReviews(d) }))),
            catchError(error => of(LoadFailure({ error: error })))
        )
    )));

Where notNullOrUndefined is a function tests each element and propagates that information in the form of a type guard. This technique is also useful when working with arrays

export function notNullOrUndefined<T>(x: T | null | undefined): x is T {
    return x !== null && x !== undefined;
}

How to add null filter to below mergeMap?

1 Answers1