title: Use service to get data with ngrx and @Effect
body: <p>currently i am trying to integrate the awesome ngrx lib into my project. Everything works as intended expect for the @ngrx/effects lib. What i am trying to do is to get some of my data from a service which will make a http request later on. I know that i am missing something but i can`t find my misunderstanding. Maybe some of you can help. </p>
  
  <p>So i have a lazy loaded module within my application where i want to use the ngrx lib.</p>
  
  <p>My code so far:</p>
  
  <blockquote>
    <p>app.module.ts</p>
  </blockquote>
  
  <pre><code>import [...]
  import { StoreModule } from '@ngrx/store';
  import { StoreDevtoolsModule } from '@ngrx/store-devtools';
  import { EffectsModule } from '@ngrx/effects';
  
  @NgModule({
      imports: [
          HttpModule,
          BrowserModule,
          BrowserAnimationsModule,
          ToastModule.forRoot(),
          FormsModule,
          SharedModule,
          ReactiveFormsModule,
          appRouting,
          StoreModule.forRoot({}),
          StoreDevtoolsModule.instrument({
              maxAge: 25
          }),
          EffectsModule.forRoot([])
      ],
      declarations: [
          AppComponent,
          NavigationComponent,
          HomeComponent,
          LoginComponent,
          SidebarComponent,
          PageNotFoundComponent
      ],
      providers: [
          AuthenticationService,
          AlertService,
          AuthGuard,
          mockBackendProvider,
          MockBackend,
          BaseRequestOptions,
  
          AppConfig,
          {
              provide: APP_INITIALIZER,
              useFactory: (config: AppConfig) =&gt; () =&gt; config.load(),
              deps: [AppConfig],
              multi: true
          },
          {
              provide: ToastOptions, useClass: NotificationOptions
          }
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>
  
  <blockquote>
    <p>project.module</p>
  </blockquote>
  
  <pre><code>import [...]
  import { StoreModule } from '@ngrx/store';
  import { EffectsModule } from '@ngrx/effects';
  import { projectReducer } from './store/project.reducer';
  import { ProjectService } from './services/project.service';
  import { ProjectEffects } from './store/project.effects';
  
  @NgModule({
      imports: [
          CommonModule,
          FormsModule,
          ReactiveFormsModule,
          ProjectRoutingModule,
          SharedModule,
          EffectsModule.forFeature([ProjectEffects]),
          StoreModule.forFeature('projectModule', {
              projectReducer: projectReducer,
          }),
  
      ],
      exports: [],
      declarations: [
          HomeComponent,
          DashboardComponent
      ],
      providers: [
          ProjectService,
          mockBackendProvider,
          MockBackend,
          BaseRequestOptions
      ],
  })
  export class ProjectModule {
  }
  </code></pre>
  
  <p>I created 4 files:</p>
  
  <blockquote>
    <p>project.actions.ts</p>
  </blockquote>
  
  <pre><code>import { Action } from '@ngrx/store';
  import { Project } from '../../../models/Project/Project';
  
  export const SELECT_ALL_PROJECTS = '[projects] Select all';
  export const ADD_PROJECT = '[projects] Add project';
  export const DELETE_PROJECT = '[projects] Delete project';
  
  export class GetAllProjectsAction implements Action {
      readonly type = SELECT_ALL_PROJECTS;
  
      constructor(public projects: Project[]) {
      }
  }
  
  export class AddProjectAction implements Action {
      readonly type = ADD_PROJECT;
  
      constructor(public project: Project) {
      }
  }
  
  export class DeleteProjectAction implements Action {
      readonly type = DELETE_PROJECT;
  
      constructor(public project: Project) {
      }
  }
  
  export type Actions = GetAllProjectsAction | AddProjectAction | DeleteProjectAction;
  </code></pre>
  
  <p>projects.effects.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {
      Actions,
      Effect
  } from '@ngrx/effects';
  import { Observable } from 'rxjs/Observable';
  import { Action } from '@ngrx/store';
  
  import * as projectAction from './project.actions';
  import { ProjectService } from '../services/project.service';
  import { of } from 'rxjs/observable/of';
  
  @Injectable()
  export class ProjectEffects {
  
      @Effect() getAll$: Observable&lt;Action&gt; = this.actions$.ofType(projectAction.SELECT_ALL_PROJECTS)
          .mergeMap(() =&gt;
              this._projectService.getAll()
                  .map((data: any[]) =&gt; ({type: projectAction.SELECT_ALL_PROJECTS, projects: data}))
                  .catch((error: any) =&gt; {
                      return of({type: 'getALL_Failed'})
                  })
          );
  
      constructor(private _projectService: ProjectService, private actions$: Actions) {
  
      }
  }
  </code></pre>
  
  <blockquote>
    <p>projects.reducer.ts</p>
  </blockquote>
  
  <pre><code>import * as projectAction from './project.actions';
  
  import { ProjectState } from './project.state';
  
  export const initialState: ProjectState = {
      projects: [
          {id: 1, title: 'Project Alpha'}, {id: 2, title: 'Project Beta'}]
  };
  
  export function projectReducer(state = initialState, action: projectAction.Actions): ProjectState {
      switch (action.type) {
          case projectAction.ADD_PROJECT:
              return Object.assign({}, state, {
                  projects: state.projects.concat(Object.assign([], state, action.project))
              });
          case projectAction.SELECT_ALL_PROJECTS:
              return Object.assign({}, state, action.projects);
          case projectAction.DELETE_PROJECT:
              return Object.assign({}, state, {
                  projects: state.projects.filter(p =&gt; p.id !== action.project.id)
              });
          default:
              return state;
      }
  }
  </code></pre>
  
  <blockquote>
    <p>projects.state.ts</p>
  </blockquote>
  
  <pre><code>import { Project } from '../../../models/Project/Project';
  
  export interface ProjectState {
      projects: Project[];
  }
  </code></pre>
  
  <p>Finally my service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import {Project} from "../../../models/Project/Project";
  
  @Injectable()
  export class ProjectService {
  
      projects: Project[] = [{
          id: 1,
          title: 'Project Alpha'
      }];
  
      constructor() {
      }
  
      getAll(): Observable&lt;Project[]&gt; {
          return Observable.of(this.projects);
      }
  }
  </code></pre>
  
  <p>So what i see on my screen are the 2 initial Projects and not the one project given by the project service. It seems like i do something wrong either in the service or in the reducer or maybe i am completely missing something else.</p>
  
  <p>// UPDATE:
  I managed to get the effect working. Well at least the effect is called but now i am stuck i an infinit loop. The app won`t response and shows  white screen</p>
  
  <p>Maybe someone can help me with that
  My code in the calling component ist:</p>
  
  <pre><code>    import {DELETE_PROJECT, SELECT_ALL_PROJECTS} from '../../store/project.actions';
  
  @Component({
      selector: 'project-dashboard',
      templateUrl: 'dashboard.component.html',
      styleUrls: ['dashboard.component.scss']
  })
  
  export class DashboardComponent implements OnInit {
  
      public async: any;
  
      projectState$: Observable&lt;ProjectState&gt;;
  
      constructor(private store: Store&lt;any&gt;) {
          // this.store.dispatch({type: SELECT_ALL_PROJECTS});
          this.projectState$ = this.store.select&lt;ProjectState&gt;(state =&gt; state.projectModule.projectReducer);
      }
  
      ngOnInit() {
          this.store.dispatch({type: SELECT_ALL_PROJECTS, projects: []});
      }
  
      delete(project: Project) {
          this.store.dispatch({type: DELETE_PROJECT, project: project})
      }
  }
  </code></pre>
  
  <p>Every help is appreciated</p>
  
  <p>Regards</p>