title: Preventing router navigation in case of an effect failure/error
body: <p>I am migrating to use <strong>ngrx Effects</strong> and I have the following issue: since <code>dispatch</code> returns <code>void</code> I am not sure how prevent router navigation if an error occurs from my ngrx effect (e.g. from <code>this.userAccountService.updateFirstName(...</code>).</p>
  
  <p>From my component class:</p>
  
  <pre class="lang-js prettyprint-override"><code>  updateFirstName() {
      this.formStatus.submitted = true;
      if (this.formStatus.form.valid) {
        //Dispatch from the store
        this.store.dispatch(new UpdateFirstNameAction(this.formStatus.form.value.firstName));
        //Undesired behavior: will navigate even in case of error/failure!
        this.router.navigate(['/dashboard/useraccount']);
      }
    }
  </code></pre>
  
  <p>From my effect class:</p>
  
  <pre class="lang-js prettyprint-override"><code>  @Effect()
    updateFirstName$: Observable&lt;Action&gt; = this.actions$
      .ofType(currentUserAccount.ActionTypes.UPDATE_FIRST_NAME)
      .map((action: UpdateFirstNameAction) =&gt; action.payload)
      .switchMap(firstName =&gt;
        this.userAccountService
          .updateFirstName(firstName)
          .map(() =&gt; new UpdateFirstNameSuccessAction(firstName))
          //I obviously can't navigate from here
      );
  </code></pre>
  
  <p>I am not sure it is a good practice (or even possible) to use the router in order to navigate from the effect.</p>
  
  <p>Can someone please suggest a clean solution to prevent the router navigation in case of an error occurring from my effect?</p>