src/app/shared/store/effects/contacts.effect.ts

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import { Injectable } from '@angular/core';
import { createEffect, Actions, ofType } from '@ngrx/effects';
import { of } from 'rxjs/observable/of';
import * as contactsActions from '@shared/store/actions/contacts.action';
import { ContactsApiClient } from '@app/pages/contacts/contacts-api-client';
import { catchError, map, switchMap } from 'rxjs/operators';
import { PageRequestInterface } from '@shared/models/page/page-request.interface';

/**
 * Effects offer a way to isolate and easily test side-effects within your
 * application. StateUpdates is an observable of the latest state and
 * dispatched action. The `toPayload` helper function returns just
 * the payload of the currently dispatched action, useful in
 * instances where the current state is not necessary.
 *
 * If you are unfamiliar with the operators being used in these examples, please
 * check out the sources below:
 *
 * Official Docs: http://reactivex.io/rxjs/manual/overview.html#categories-of-operators
 * RxJS 5 Operators By Example: https://gist.github.com/btroncone/d6cf141d6f2c00dc6b35
 */

@Injectable()
export class ContactsEffects {

  getContactsPage$: any = createEffect(() =>
    this.actions$.pipe(
      ofType(contactsActions.loadContactsPage),
      map(action => action['payload']),
      switchMap((request: PageRequestInterface) => {
        return this.contactsApiClient.getContacts(request).pipe(
          map(contacts => contactsActions.loadContactsPageSuccess({ payload: contacts })),
          catchError(error => of(contactsActions.loadContactsPageFail({ payload: error })))
        );
      })
    )
  );

  constructor(private actions$: Actions, private contactsApiClient: ContactsApiClient) {}
}