Skip to content

Instantly share code, notes, and snippets.

@DaveMBush
Last active May 20, 2017
Embed
What would you like to do?
NgRX Sample Code
// standard imports omitted for clarity
import {AppStores} from './app.stores';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
// standard imports omitted for clarity
AppStores
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import {NgModule} from '@angular/core';
import {StoreModule} from '@ngrx/store';
import {EffectsModule} from '@ngrx/effects';
const reducers = {
// reducer definitions go here
};
@NgModule({
imports: [
StoreModule.provideStore(reducers, []),
// Effects definitions go here: ie
// EffectsModule.run(effectClass)
],
providers: []
})
export class AppStores {
}
import {GenericReducer} from "./state/generic/generic.reducer";
const reducers = {
generic: GenericReducer
};
import {NgModule} from '@angular/core';
import {StoreModule} from '@ngrx/store';
import {EffectsModule} from '@ngrx/effects';
import {GenericReducer} from "./state/generic/generic.reducer";
const reducers = {
generic: GenericReducer
};
@NgModule({
imports: [
StoreModule.provideStore(reducers, []),
// Effects definitions go here: ie
// EffectsModule.run(effectClass)
],
providers: []
})
export class AppStores {
// The first time we access store, we use the
// keys from reducers (above) and create a new
// object with the same keys paired with strings
private static _stores = null;
private static get stores() {
if(!this._stores) {
const obj = {};
Object.keys(reducers).map(x => {
obj[x] = x;
});
this._stores = obj;
}
return this._stores;
}
private static checkStoreName(store: string) {
if(!store) {
throw new ReferenceError('undefined store');
}
return store;
}
// use properties to retrieve the strings
// and verify that we got the proper string
// to eliminate errors caused by retrieving
// the store elements using strings that
// don't exist. While it is still technically
// possible to ask for a property that doesn't
// exist, intellisense should reduce this.
static get generic(): string {
return AppStores.checkStoreName(AppStores.stores.generic);
}
}
@NgModule({
imports: [
StoreModule.provideStore(reducers, []),
// Effects definitions go here: ie
EffectsModule.run(GenericEffect)
],
providers: []
})
export class AppStores {
import {NgModule} from '@angular/core';
import {StoreModule} from '@ngrx/store';
import {EffectsModule} from '@ngrx/effects';
import {GenericReducer} from "./state/generic/generic.reducer";
const reducers = {
generic: GenericReducer
};
@NgModule({
imports: [
StoreModule.provideStore(reducers, []),
// Effects definitions go here: ie
EffectsModule.run(effectClass)
],
providers: []
})
export class AppStores {}
// Add these imports
import {combineReducers, StoreModule} from '@ngrx/store';
import {storeFreeze} from 'ngrx-store-freeze';
import {compose} from '@ngrx/core';
import {environment} from '../environments/environment';
// existing reducers constant
const reducers = {
generic: GenericReducer
};
const productionReducer = combineReducers(reducers);
const devReducer = compose(storeFreeze, combineReducers)(reducers);
export function reducer(state: any, action: any) {
if(environment.production) {
return productionReducer(state, action);
} else {
return devReducer(state, action);
}
}
@NgModule({
imports: [
StoreModule.provideStore(reducer),
EffectsModule.run(effectClass)
]
})
export class AppStores {
}
store.dispatch(GenericAction.add(20));
export class GenericAction {
static ADD = "GenericAction.ADD";
static add(value) {
return {
type: GenericAction.ADD,
payload: value
}
}
}
import {Injectable} from '@angular/core';
import { Effect, Actions } from '@ngrx/effects';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/retry';
import 'rxjs/add/operator/finally';
import {GenericAction} from './generic.action';
@Injectable()
export class GenericEffect {
@Effect() search$ = this.update$
.ofType(GenericAction.GET_DATA)
.map(action => action.payload)
.map((possibleParams) => {
return this.http.get(...)
.map(x => x.json() || [])
})
.map(results => GenericAction.results(results));
constructor(private update$: Actions,
private http: Http) {
}
}
import {ActionReducer, Action} from '@ngrx/store';
// This double export form is how I deal with AoT errors that using
// lamda expressions would give me. There are other ways, this is
// my way.
export function genericReducer(state: any = 0, action: Action): any {
switch(action.type) {
default:
return state;
}
}
export const GenericReducer: ActionReducer<any> = genericReducer
import {ActionReducer, Action} from '@ngrx/store';
import {GenericAction} from './generic.action';
// This double export form is how I deal with AoT errors that using
// lamda expressions would give me. There are other ways, this is
// my way.
export function genericReducer(state: = 0, action: Action): number {
switch(action.type) {
case GenericAction.ADD:
return state + <number>action.payload;
default:
return state;
}
}
export const GenericReducer: ActionReducer<number> = genericReducer
import { Component } from '@angular/core';
import {Store} from "@ngrx/store";
import {GenericAction} from "./state/generic/generic.action";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
totalObserver;
constructor(private store: Store<AppState>) {
this.totalObserver = store.select(x => x.generic)
}
}
store.select('generic');
store.select(AppStores.generic);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment