NgRx/Effects 4 Example

npm install @ngrx/effects --save 

npm install @ngrx/store --save 

npm i [email protected] --save 

import { EffectsModule } from '@ngrx/effects';

@NgModule({
  imports: [
    ------
    EffectsModule.forRoot([ ArticleEffects, BookEffects ])
  ]
  ------
})
export class AppModule { } 

import { EffectsModule } from '@ngrx/effects';

@NgModule({
  imports: [
    ------
    EffectsModule.forFeature([ CompanyEffects, EmployeeEffects ])
  ]
  ------
})
export class FeatureModule {} 

import { Injectable } from '@angular/core';
import { Action } from '@ngrx/store';
import { Actions, Effect } from '@ngrx/effects';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class ArticleEffects {

  constructor(private actions$: Actions) {}      

  @Effect() 
  loadAllArticles$: Observable<Action> = this.actions$
    .ofType('CREATE', 'UPDATE')
    .do(action => {
       console.log(action);
    });
}

import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch'; 

@Effect() 
createArticle$: Observable<Action> = this.actions$
 .ofType<fromActions.CreateAction>(fromActions.CREATE)
 .map(action => action.payload)
 .mergeMap(article => 
	 this.articleService.createArticle(article)
	 .map(res => new fromActions.CreateSuccessAction(res)) 
	 .catch(error => of(new fromActions.CreateFailureAction(error)))
 ); 

import { of } from 'rxjs/observable/of'; 

@Effect() 
searchArticleById$: Observable<Action> = this.actions$
  .ofType<fromActions.GetByIdAction>(fromActions.GET_BY_ID)
  .debounceTime(500)
  .map(action => action.payload)
  .switchMap(id => 
	 this.articleService.getArticleById(id)
	 .map(res => new fromActions.GetByIdSuccessAction(res)) 
  ); 

@Effect({ dispatch: false }) 
logActions$ = this.actions$
  .do(action => {
      console.log(action);
  }); 

@Effect({ dispatch: false })
loadAllArticles$: Observable<Action> = this.actions$
  .ofType(fromActions.SHOW_ALL)
  .switchMap(() => 
      this.articleService.getAllArticles()
      .map(data => new fromActions.ShowAllSuccessAction(data)) 
  ); 

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions } from '@ngrx/effects';

@Injectable()
export class AuthEffects {

  @Effect({ dispatch: false })
  loginSuccess$ = this.actions$
   .ofType(LOGIN_SUCCESS)
   .do(() => { 
         this.router.navigate(['/home'])
   });

  constructor(
       private actions$: Actions,
        private router: Router
  ) {}

}

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class TestData implements InMemoryDbService {
  createDb() {
    let articleDetails = [
      {id: '1', title: 'Core Java Tutorial', category: 'Java'},
      {id: '2', title: 'Angular Tutorial', category: 'Angular'},
      {id: '3', title: 'Hibernate Tutorial', category: 'Hibernate'}
    ];
    return { articles: articleDetails };
  }
}  

/api/articles 

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { TestData } from './test-data';

@NgModule({
  imports: [     
      ------
      InMemoryWebApiModule.forRoot(TestData)		
  ],
  ------
})
export class AppModule { } 

my-app
|
|--src
|   |
|   |--app 
|   |   |
|   |   |--actions
|   |   |    |
|   |   |    |--article.actions.ts
|   |   |
|   |   |--effects
|   |   |    |
|   |   |    |--article.effects.ts
|   |   |
|   |   |--services
|   |   |    |
|   |   |    |--article.service.ts
|   |   |
|   |   |--components
|   |   |    |
|   |   |    |--article.component.html
|   |   |    |--article.component.ts
|   |   |
|   |   |--models
|   |   |    |
|   |   |    |--article.ts
|   |   |
|   |   |--reducers
|   |   |    |
|   |   |    |--app.states.ts
|   |   |    |--article.reducer.ts
|   |   |    |--reducers.ts
|   |   |
|   |   |--app.component.ts
|   |   |--app.module.ts 
|   |   |--test-data.ts
|   | 
|   |--main.ts
|   |--index.html
|   |--styles.css
|
|--node_modules
|--package.json 

import { Injectable } from '@angular/core';
import { Action } from '@ngrx/store';
import { Actions, Effect } from '@ngrx/effects';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import { of } from 'rxjs/observable/of';
import * as fromActions from '../actions/article.actions';
import { ArticleService } from '../services/article.service';

@Injectable()
export class ArticleEffects {

  constructor(
    private actions$: Actions,
    private articleService: ArticleService
  ) {}      

  @Effect() 
  loadAllArticles$: Observable<Action> = this.actions$
    .ofType(fromActions.SHOW_ALL)
    .switchMap(() => 
       this.articleService.getAllArticles()
       .map(data => new fromActions.ShowAllSuccessAction(data)) 
    );

  @Effect() 
  createArticle$: Observable<Action> = this.actions$
    .ofType<fromActions.CreateAction>(fromActions.CREATE)
    .map(action => action.payload)
    .mergeMap(article => 
       this.articleService.createArticle(article)
       .map(res => new fromActions.CreateSuccessAction(res)) 
       .catch(error => of(new fromActions.CreateFailureAction(error)))
    );
    
  @Effect() 
  searchArticleById$: Observable<Action> = this.actions$
      .ofType<fromActions.GetByIdAction>(fromActions.GET_BY_ID)
      .debounceTime(500)
      .map(action => action.payload)
      .switchMap(id => 
         this.articleService.getArticleById(id)
         .map(res => new fromActions.GetByIdSuccessAction(res)) 
      );    
} 

import { Action } from '@ngrx/store';
import { Article } from '../models/article';

export const SHOW_ALL = '[ARTICLE] Show All';
export const SHOW_ALL_SUCCESS = '[ARTICLE] Show All Success';
export const CREATE = '[ARTICLE] Create';
export const CREATE_SUCCESS = '[ARTICLE] Create Success';
export const CREATE_FAILURE = '[ARTICLE] Create Failure';
export const GET_BY_ID = '[ARTICLE] Get by Id';
export const GET_BY_ID_SUCCESS = '[ARTICLE] Get by Id Success';
export const RESET = '[ARTICLE] Reset';

export class ShowAllAction implements Action {
  readonly type = SHOW_ALL;
}
export class ShowAllSuccessAction implements Action {
  readonly type = SHOW_ALL_SUCCESS;
  constructor(public payload: Article[]) {}
}
export class CreateAction implements Action {
  readonly type = CREATE;
  constructor(public payload: Article) {}
}
export class CreateSuccessAction implements Action {
  readonly type = CREATE_SUCCESS;
  constructor(public payload: Article) {}
}
export class CreateFailureAction implements Action {
  readonly type = CREATE_FAILURE;
  constructor(public payload: any) {}
}
export class GetByIdAction implements Action {
  readonly type = GET_BY_ID;
  constructor(public payload: string) {}
}
export class GetByIdSuccessAction implements Action {
  readonly type = GET_BY_ID_SUCCESS;
  constructor(public payload: Article[]) {}
}
export class ResetAction implements Action {
  readonly type = RESET;
}

export type ALL_REDUCER_ACTIONS = ShowAllSuccessAction | CreateSuccessAction | CreateFailureAction
                 | GetByIdSuccessAction | ResetAction; 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Article } from '../models/article';

@Injectable()
export class ArticleService {
    constructor(private http: HttpClient) { }

    url = "/api/articles";
    getAllArticles(): Observable<Article[]> {
        return this.http.get<Article[]>(this.url);
    }
    createArticle(article: Article): Observable<Article> {
        return this.http.post<Article>(this.url, article);
    }
    getArticleById(id: string): Observable<Article[]> {
        console.log(id);
        return this.http.get<Article[]>(this.url + '?id=' + id);
    }    
} 

export interface Article {
	id: number;
	title: string;
	category: string;
} 

import { Article } from '../models/article';

export interface AppState {
	articleState: ArticleState;
}

export interface ArticleState {
	articles: Article[];
	message: any;
} 

import { createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromActions from '../actions/article.actions';
import { ArticleState } from './app.states';

export const initialState: ArticleState = { articles: [], message: ''};

export function reducer(state = initialState, action: fromActions.ALL_REDUCER_ACTIONS): ArticleState {
  switch(action.type) {
    case fromActions.SHOW_ALL_SUCCESS: {
      return {articles: action.payload, message: 'Success'};
    }
    case fromActions.CREATE_SUCCESS: {
      return {articles: [action.payload], message: 'Article Created.'};
    } 
    case fromActions.CREATE_FAILURE: {
      return {articles: [], message: action.payload};
    }
    case fromActions.GET_BY_ID_SUCCESS: {
      console.log(action.payload);
      return {articles: action.payload, message: 'Success'};
    }   
    case fromActions.RESET: {
      return { articles: [], message: ''};
    }  
    default: {
      return state;
    }
  }	
}

export const getArticleState = createFeatureSelector<ArticleState>('articleState');

export const getArticles = createSelector(
    getArticleState, 
    (state: ArticleState) => state.articles 
);

export const getMessage = createSelector(
  getArticleState, 
  (state: ArticleState) => state.message
); 

import { ActionReducerMap, ActionReducer, MetaReducer } from '@ngrx/store';
import { AppState } from './app.states';
import * as fromReducer from './article.reducer';
import { environment } from '../../environments/environment';

export const reducers: ActionReducerMap<AppState> = {
  articleState: fromReducer.reducer
};

export function logger(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
  return function(state: AppState, action: any): AppState {
    console.log('state', state);
    console.log('action', action);
    return reducer(state, action);
  };
}

export const metaReducers: MetaReducer<AppState>[] = !environment.production
  ? [logger]
  : []; 

import { FormBuilder, Validators } from '@angular/forms'
import { Store } from '@ngrx/store';
import { Component } from '@angular/core';    
import { Observable } from 'rxjs/Observable';
import * as fromReducer from '../reducers/article.reducer';
import * as fromActions from '../actions/article.actions';
import { ArticleState } from '../reducers/app.states';
import { Article } from '../models/article';

@Component({
	selector: 'app-article',
	templateUrl: 'article.component.html'
})
export class ArticleComponent {
	articles$: Observable<Article[]>
	message$: Observable<any>
	task= '';

	constructor(
		   private formBuilder:FormBuilder,
		   private store: Store<ArticleState>) {

		this.articles$ = store.select(fromReducer.getArticles);
		this.message$ = store.select(fromReducer.getMessage);
	}
	articleForm = this.formBuilder.group({
		id: ['', Validators.required ],
		title: '',
		category: ''
	});
	get id() {
		return this.articleForm.get('id');
	}
	onFormSubmit() {
		if(this.articleForm.valid) {
		   let article = this.articleForm.value;
		   this.createArticle(article);
		   this.articleForm.reset();
		}
	 }
	createArticleView(){
		this.task = 'create';
		this.store.dispatch(new fromActions.ResetAction());
	}
	getArticleByIdView(){
		this.task = 'get';
		this.store.dispatch(new fromActions.ResetAction());
	}
	loadAllArticles(){
		this.task = 'all';
		this.store.dispatch(new fromActions.ShowAllAction());
	}
	createArticle(article: Article){
		this.store.dispatch(new fromActions.CreateAction(article));
	}
	searchArticleById(articleId: string){
		this.store.dispatch(new fromActions.GetByIdAction(articleId));
	}
} 

<button (click)="loadAllArticles()">Show All Articles</button>
<button (click)="createArticleView()">Create Article</button>
<button (click)="getArticleByIdView()">Search Article By Id</button>

<div [ngSwitch]="task">
    <ng-template [ngSwitchCase]= "'all'">
        <ul>
            <li *ngFor="let article of articles$ | async">
                {{article.id}} - {{article.title}} - {{article.category}}   
            </li>
        </ul> 
    </ng-template>
 
    <ng-template [ngSwitchCase]= "'create'">
        <p> <b>{{ message$ | async }}</b> </p>
        <form [formGroup]="articleForm" (ngSubmit)="onFormSubmit()">
                <p> Enter New Id: <input formControlName="id"> 
                    <label *ngIf="id.errors?.required && !articleForm.pristine" style="color:red">
                            Enter article id
                    </label> 
                </p>
           <p> Enter Title: <input formControlName="title"> </p>
           <p> Enter Category: <input formControlName="category"> </p>
           <p> <button> Submit </button> </p>
        </form>
        <ul>
            <li *ngFor="let article of articles$ | async">
                {{article.id}} - {{article.title}} - {{article.category}}   
            </li>
        </ul>
    </ng-template>    

    <ng-template [ngSwitchCase]= "'get'">
        <p> Enter Id: <input [(ngModel)]="articleId" (input)="searchArticleById(articleId)">  </p>
        <ul>
            <li *ngFor="let article of articles$ | async">
                {{article.id}} - {{article.title}} - {{article.category}}   
            </li>
        </ul>
    </ng-template>
    <ng-template ngSwitchDefault> <br/><b>Select Task</b> </ng-template>
</div> 

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

@Component({
   selector: 'app-root',
   template: `
	<app-article></app-article>
     `
})
export class AppComponent {
}  

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { AppComponent }  from './app.component';
import { ArticleComponent }  from './components/article.component';
import { reducers, metaReducers } from './reducers/reducers';
import { ArticleEffects } from './effects/article.effects';
import { ArticleService } from './services/article.service';

//For InMemory testing
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { TestData } from './test-data';

@NgModule({
  imports: [     
      BrowserModule,
      ReactiveFormsModule,
      FormsModule,
      HttpClientModule,
      StoreModule.forRoot(reducers, {metaReducers}),
      EffectsModule.forRoot([ArticleEffects]),
      InMemoryWebApiModule.forRoot(TestData)
  ],
  declarations: [
      AppComponent,
      ArticleComponent
  ],
  providers: [
      ArticleService
  ],
  bootstrap: [
      AppComponent
  ]
})
export class AppModule { }