[Angular] NgRx/effect, why to use it?

See the current implementaion of code, we have a smart component, and inside the smart component we are using both 'serivce' and 'store'.


In the large application, what we really want is one service to handle the application state instead of two or more. And also we need response to the user action to get new data, all the requirements actaully can be handled by 'Store'. 


import {Component, OnInit} from '@angular/core';
import {Store} from '@ngrx/store';
import {ThreadsService} from "../services/threads.service";
import {AppState} from "../store/application-state";
import {AllUserData} from "../../../shared/to/all-user-data";
import {LoadUserThreadsAction} from "../store/actions";
import {Observable} from "rxjs";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/skip';
import {values, keys, last} from 'ramda';
import {Thread} from "../../../shared/model/thread.interface";
import {ThreadSummary} from "./model/threadSummary.interface";

  selector: 'thread-section',
  templateUrl: './thread-section.component.html',
  styleUrls: ['./thread-section.component.css']
export class ThreadSectionComponent implements OnInit {

  userName$: Observable<string>;
  counterOfUnreadMessages$: Observable<number>;
  threadSummary$: Observable<ThreadSummary[]>;

  constructor(private store: Store<AppState>,
              private threadsService: ThreadsService) {

    this.userName$ = store.select(this.userNameSelector);

    this.counterOfUnreadMessages$ = store.select(this.unreadMessageCounterSelector);

    this.threadSummary$ = store.select(this.mapStateToThreadSummarySelector.bind(this))

  mapStateToThreadSummarySelector(state: AppState): ThreadSummary[] {
    const threads = values<Thread>(state.storeData.threads);
    return threads.map((thread) => this.mapThreadToThreadSummary(thread, state));

  mapThreadToThreadSummary(thread: Thread, state: AppState): ThreadSummary {
    const names: string = keys(thread.participants)
      .map(participantId => state.storeData.participants[participantId].name)
      .join(', ');
    const lastMessageId: number = last(thread.messageIds);
    const lastMessage = state.storeData.messages[lastMessageId];
    return {
      id: thread.id,
      participants: names,
      lastMessage: lastMessage.text,
      timestamp: lastMessage.timestamp

  userNameSelector(state: AppState): string {
    const currentUserId = state.uiState.userId;
    const currentParticipant = state.storeData.participants[currentUserId];

    if (!currentParticipant) {
      return "";

    return currentParticipant.name;

  unreadMessageCounterSelector(state: AppState): number {
    const currentUserId: number = state.uiState.userId;

    if (!currentUserId) {
      return 0;

    return values<Thread>(state.storeData.threads)
        (acc: number, thread) => acc + (thread.participants[currentUserId] || 0)
        , 0);

  ngOnInit() {

      .subscribe((allUserData: AllUserData) => {
        this.store.dispatch(new LoadUserThreadsAction(allUserData))



So what we want to do to improve the code is to "remove the service from the component, let it handle by ngrx/effect" lib.


Here instead we call the service to get data, we will dispatch an action call 'LoadUserTreadsAction', and inside this action, will have side effect either "UserTreadsLoadSuccess" or "UserTreadsLoadError".


Create a effect service:

import {Injectable} from '@angular/core';
import {Action} from '@ngrx/store';
import {Actions, Effect} from "@ngrx/effects";
import {ThreadsService} from "../../services/threads.service";
import {LOAD_USER_THREADS_ACTION, LoadUserThreadsSuccess} from "../actions";
import {Observable} from "rxjs";

export class LoadUserThreadsEffectService {

  constructor(private action$: Actions, private threadsService: ThreadsService) {

  userThreadsEffect$: Observable<Action> = this.action$
    .switchMap(() => this.threadsService.loadUserThreads()) // get data from service
    .map((allUserData) => new LoadUserThreadsSuccess(allUserData)) // After get data, dispatch success action


And of course, we need to import the lib:

import {EffectsModule} from "@ngrx/effects";
import {LoadUserThreadsEffectService} from "./store/effects/load-user-threads.service";

  declarations: [
  imports: [
  providers: [
  bootstrap: [AppComponent]
export class AppModule {


We need to change reudcer, instead of add case for 'LOAD_USER_THREAD_ACTION', we should do 'LOAD_USER_THREADS_SUCCESS':

export function storeReducer(state: AppState = INITIAL_APPLICATION_STATE, action: Action): AppState {

  switch(action.type) {
          return handleLoadUserThreadsAction(state, action);
      return state;


Last, in our component, we dispatch 'LoadUserThreadsAction':

  ngOnInit() {

    this.store.dispatch(new LoadUserThreadsAction())