Angular 2 Mocking @ngrx/Store Simple Store
Example
simple.action.ts
import { Action } from '@ngrx/store';
export enum simpleActionTpye {
add = "simpleAction_Add",
add_Success = "simpleAction_Add_Success"
}
export class simpleAction {
type: simpleActionTpye
constructor(public payload: number) { }
}
simple.efficts.ts
import { Effect, Actions } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs';
import { simpleAction, simpleActionTpye } from './simple.action';
@Injectable()
export class simpleEffects {
@Effect()
addAction$: Observable<simpleAction> = this.actions$
.ofType(simpleActionTpye.add)
.switchMap((action: simpleAction) => {
console.log(action);
return Observable.of({ type: simpleActionTpye.add_Success, payload: action.payload })
// if you have an api use this code
// return this.http.post(url).catch().map(res=>{ type: simpleAction.add_Success, payload:res})
});
constructor(private actions$: Actions) { }
}
simple.reducer.ts
import { Action, ActionReducer } from '@ngrx/store';
import { simpleAction, simpleActionTpye } from './simple.action';
export const simpleReducer: ActionReducer<number> = (state: number = 0, action: simpleAction): number => {
switch (action.type) {
case simpleActionTpye.add_Success:
console.log(action);
return state + action.payload;
default:
return state;
}
}
store/index.ts
import { combineReducers, ActionReducer, Action, StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { ModuleWithProviders } from '@angular/core';
import { compose } from '@ngrx/core';
import { simpleReducer } from "./simple/simple.reducer";
import { simpleEffects } from "./simple/simple.efficts";
export interface IAppState {
sum: number;
}
// all new reducers should be define here
const reducers = {
sum: simpleReducer
};
export const store: ModuleWithProviders = StoreModule.forRoot(reducers);
export const effects: ModuleWithProviders[] = [
EffectsModule.forRoot([simpleEffects])
];
app.module.ts
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core';
import { effects, store } from "./Store/index";
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// store
store,
effects
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { IAppState } from './Store/index';
import { simpleActionTpye } from './Store/simple/simple.action';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(private store: Store<IAppState>) {
store.select(s => s.sum).subscribe((res) => {
console.log(res);
})
this.store.dispatch({
type: simpleActionTpye.add,
payload: 1
})
this.store.dispatch({
type: simpleActionTpye.add,
payload: 2
})
this.store.dispatch({
type: simpleActionTpye.add,
payload: 3
})
}
}
result 0 1 3 6
