Angular : Adding effects to your project.

To install effects, use the following cli :-

npm install @ngrx/effects --save

To add effect, you need to setup your Store reducer first. After that everything is so much easier.

You only requires this piece of code to setup your effects :-

import { Injectable } from '@angular/core';

import { Actions, Effect, ofType } from '@ngrx/effects';

import { ActionTypes } from './actions/Login';

import { map, mergeMap } from 'rxjs/operators';

@Injectable()

export class AppEffects {

constructor(private actions$: Actions) {

}

@Effect()

loginEffects$ = this.actions$.pipe(ofType(ActionTypes.Login),

map(action => {

console.log("login effect taking place....")

return ({ type: "tested" });

}));

}

And then configure it, in the app.module.ts

imports: [

BrowserModule,FormsModule,AppRoutingModule,

StoreModule.forRoot({login : LoginReducer}),

EffectsModule.forRoot([AppEffects])

],