Search code examples
effectsngrx

@ngrx Effect does not run the second time


I've just started learning about @ngrx/store and @ngrx.effects and have created my first effect in my Angular/Ionic app. It runs ok the first time but if I dispatch the event to the store again (i.e when clicking the button again), nothing happens (no network call is made, nothing in console logs). Is there something obvious I'm doing wrong? Here's the effect:

@Effect() event_response$ = this.action$
    .ofType(SEND_EVENT_RESPONSE_ACTION)
    .map(toPayload)
    .switchMap((payload) => this.myService.eventResponse(payload.eventId,payload.response))
    .map(data => new SentEventResponseAction(data))
    .catch((error) => Observable.of(new ErrorOccurredAction(error)));

Thanks


Solution

  • It sounds like an error is occurring. In that situation, the action in the observable returned by catch will be emitted into the effect's stream and the effect will then complete - which will prevent the effect from running after the error action is emitted.

    Move the map and the catch into the switchMap:

    @Effect() event_response$ = this.action$
      .ofType(SEND_EVENT_RESPONSE_ACTION)
      .map(toPayload)
      .switchMap((payload) => this.myService
        .eventResponse(payload.eventId, payload.response)
        .map(data => new SentEventResponseAction(data))
        .catch((error) => Observable.of(new ErrorOccurredAction(error)))
    );
    

    Composing the catch within the switchMap will prevent the effect from completing if an error occurs.