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)
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.