title: Howto navigate in Angular 2 when using ngrx store
body: <p>I'm using ngrx store (4.x) together with Angular 4. I use effects to make CRUD operations on the backend, like the example below which adds a Task on the backend API.</p>
  
  <p><strong>Effect:</strong></p>
  
  <pre><code>  @Effect()
    addTask: Observable&lt;Action&gt; = this.actions$
      .ofType(LeadAction.ADD_TASK)
      .map((action: LeadAction.AddTaskAction) =&gt; action.payload)
      .switchMap((task: TaskViewModel) =&gt; {
        return this.leadApi.leadAddTask(task.LeadId, task)
          .map((taskResult: TaskViewModel) =&gt; {
            return new LeadAction.AddTaskSuccessAction(taskResult);
          })
          .catch((e: any) =&gt; of(new LeadAction.AddTaskFailureAction(e)));
      });
  </code></pre>
  
  <p><strong>TaskEditComponent :</strong></p>
  
  <pre><code>  onSave(): void {
      this.store.dispatch(new AddTaskAction(this.task));
  
      // **** NAVIGATE TO PAGE TaskListComponent or OverviewComponent ON SUCCESS
      // OR
      // **** NAVGIATE TO PAGE Y ON ERROR
    }
  </code></pre>
  
  <p>Question: In my component I need to navigate to different pages and I struggle now where to put this logic?</p>
  
  <p>Especially when I think about following scenarios, where the TaskEditComponent is 'called' by different Components:</p>
  
  <p><em>Should navigate back to TaskListComponent:</em> </p>
  
  <p>OverviewComponent->TaskListComponent->TaskEditComponent back to List</p>
  
  <p><em>Should navigate back to OverviewComponent:</em></p>
  
  <p>OverviewComponent->TaskEditComponent </p>