ngrx - handling errors in reducer and effect

Question

Having a play around using ngrx with the effects module. I'm dispatching an action, doing some async stuff via an effect, then I'm dispatching a new action to update the state, then redirect. Here's a cut down version of what i'm doing:

@Injectable()
export class Effects {

  @Effect()
  start$: Observable<Action> = this.actions$
    .ofType('start')
    // omitted for brevity
    .concatMap(action => [
      new finishAction(action.payload),
      go(['/'])
    ])
    .catch((err) => {
      console.log('err', err);
      return Observable.empty();
    })

  constructor(private actions$: Actions) {
  }
}

This all works fine - when i dispatch a start action, this effect kicks in, dispatches a finish action, then redirects back to the root (via the go action which is imported from @ngrx/router-store.

How do I handle something failing in finishAction ? At the moment i get an error in the console and then go runs regardless.

Ideally i'd like to intercept this failure, and dispatch another action (so i can show a modal or something, but not do the redirect)

Note that catching errors with the approach you are using in the snippet will see your effect observable complete and no actions will be handled after an error. See stackoverflow.com/a/41685689/6680611 — cartant

Julia Passynkova Julia Passynkova · Accepted Answer · 2017-04-27T14:43:42

If the finishAction's reducer fails the process the action the state should be changed to the error one.

You can subscribe to Effects.start$ in your component and select the error state. If the subscription receives the error you can react by moving to a new route.

ngrx - handling errors in reducer and effect

1 Answers