What is the better way to cancel a ngrx effect service call, based on a validation in the effect?

Question

I have this ngrx effect that is calling in this example to movies service, but is depending of a value selector, if this values is as expected in validation, the effect sould send a new action, this way I avoid to call the service because the condition. Right now I cannot use another action (this would be more descriptive) in the if block because of this error:

Type 'Observable' is not assignable to type 'Observable | ((...args: any[]) => Observable)'.

Type 'Observable' is not assignable to type 'Observable'.ts(2322).

What is the better way to handle this scenario?

loadMovies$ = createEffect(() => this.actions$.pipe(
        ofType('[Movies Page] Load Movies'),
        concatMap(action => of(action).pipe(withLatestFrom(this.store.select(getBlockBuster)))),
        mergeMap(([{payload}, foundBlockBuster]) => {
            if (!foundBlockBuster) {
                // in order to avoid errors we need to use this({ type: '[Movies API] Movies Loaded Success', payload: movies }))
                return of({ type: '[Movies] The block busters are rent' })
            }
            return this.moviesService.getAll()
                .pipe(
                    map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
                    catchError(() => of({ type: '[Movies API] Movies Loaded Error' }))
                )
            })
        )
    );

user2216584 user2216584 · Accepted Answer · 2019-08-23T18:28:30

This error is happening because you should return Observable<action> instead your code is returning two types of object literal (assumed as it is of type Action) one which has only type property and another one has type and payload. To fix this error have an array of Action and then push your object literal in that array and then return that array like this:

loadMovies$ = createEffect(() => this.actions$.pipe(
        ofType('[Movies Page] Load Movies'),
        concatMap(action => of(action).pipe(withLatestFrom(this.store.select(getBlockBuster)))),
        mergeMap(([{payload}, foundBlockBuster]) => {

            const actions = new Array<Action>();

            if (!foundBlockBuster) {
                actions.push({ type: '[Movies] The block busters are rent' });
                return actions;                
            }
            return this.moviesService.getAll()
                .pipe(
                    mergeMap(movies => {
                      actions.push({ type: '[Movies API] Movies Loaded Success', payload: movies });
                      return actions;
                    }),
                    catchError(() => {
                      actions.push({ type: '[Movies API] Movies Loaded Error' });
                      return actions;
                    })
                )
            })
        )
    );

Alternatively, you can typecast your object literals as <Action> like this:

<Action>{ type: '[Movies] The block busters are rent' }

But I prefer to use the array as array allows to dispatch multiple actions if my app logic needs so.

Hope it helps.

What is the better way to cancel a ngrx effect service call, based on a validation in the effect?

1 Answers