Use ngrx-effect to call a service when an action occurs

Question

I am learning about effects and and trying to dispatch a warning notification when a search fails. My search actions are defined as such

 export enum SearchActionTypes {
  SearchActionSearch = '[Search] Action search',
  SearchActionFulfilled = '[Search] Action search fulfilled',
  SearchActionFailed = '[Search] Action search failed',
}

I have a service in my app that can display notifications and I am trying to call this service when a SearchActionFailed Action is dispatched. However, I don't know how to build the effect for this. Currently I am here:

    @Injectable()
export class NotificationEffects {
    @Effect()
    // show error notification when an illegal value is entered into search
    searchFailEffect = this.actions$.pipe(
        ofType(Search.SearchActionTypes.SearchActionFailed),
    );

    constructor(private actions$: Actions,
        private notificationService: NotificationService) {}
}

I want to call the notification service API when the effect catches the action and the call is structured like this:

this.notificationService.createNotification('type', 'message'))

I don't need anything from the action payload just a call to this service when the fail action is dispatched. However, I do not know how to structure that effect. My main issue is an effect has to return an observable but I don't need anything I just need to know when a search action fails so I can call the service to display a notification warning the user that their input is false

CozyAzure CozyAzure · Accepted Answer · 2018-04-30T17:40:24

If you want to listen to the createNotification's emission, you can just pass switchMap into your pipe:

searchFailEffect = this.actions$.pipe(
    ofType(Search.SearchActionTypes.SearchActionFailed),
    switchMap(() => this.notificationService.createNotification('type', 'message')))
    .subscribe(x=>console.log(x)); //gives you emission from this.notificationService

If you however just want to do something and doesnt care about the result aka "side effect", you can use .tap():

searchFailEffect = this.actions$.pipe(
    ofType(Search.SearchActionTypes.SearchActionFailed),
    tap(() => this.notificationService.createNotification('type', 'message')))
    .subscribe(x=>console.log(x)); //gives you ofType's emission

Use ngrx-effect to call a service when an action occurs

1 Answers