[How to add NgRx] - NgRx Store & App State handling

Client/app/app.module.ts

@@ -10,6 +10,11 @@ import { Ng2BootstrapModule } from 'ng2-bootstrap';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
+// ngrx store
+import { RouterStoreModule } from '@ngrx/router-store';
+import { StoreModule, Store } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './containers/home/home.component';
@@ -24,6 +29,7 @@ import { UserService } from './shared/user.service';
 import { ConnectionResolver } from './shared/route.resolver';
 import { ORIGIN_URL } from './shared/constants/baseurl.constants';
 import { TransferHttpModule } from '../modules/transfer-http/transfer-http.module';
+import { reducer } from './reducers';
 
 export function createTranslateLoader(http: Http, baseHref) {
  // Temporary Azure hack
@@ -62,6 +68,11 @@ export function createTranslateLoader(http: Http, baseHref) {
  }
  }),
 
+ StoreModule.provideStore(reducer),
+ RouterStoreModule.connectRouter(),
+ StoreDevtoolsModule.instrumentOnlyWithExtension(),
+
+
  // App Routing
  RouterModule.forRoot([
  {
@@ -133,7 +144,7 @@ export function createTranslateLoader(http: Http, baseHref) {
  }
  },
 
- { path: 'lazy', loadChildren: './containers/+lazy/lazy.module#LazyModule'},
+ { path: 'lazy', loadChildren: './containers/+lazy/lazy.module#LazyModule' },
 
  // All else fails - go home!
  { path: '**', redirectTo: 'home' }

Client/app/browser-app.module.ts

@@ -23,12 +23,12 @@ export function createConfig(): SignalRConfiguration {
 }
 
 export function getOriginUrl() {
- return window.location.origin;
+  return window.location.origin;
 }
 
 export function getRequest() {
- // the Request object only lives on the server
- return { cookie: document.cookie };
+  // the Request object only lives on the server
+  return { cookie: document.cookie };
 }
 
 @NgModule({

Client/app/containers/counter/counter.component.html

@@ -2,6 +2,9 @@ <h1>Counter</h1>
 
 <p>This is a simple example of an Angular 2 component.</p>
 
-<p>Current count: <strong>{{ currentCount }}</strong></p>
+<!--<p>Current count: <strong>{{ counter.value | async }}</strong></p>-->
 
+<button (click)="decreaseCounter()">Decrease</button>
 <button (click)="incrementCounter()">Increment</button>
+
+<pre style="margin-top:10px">{{ counter | async | json }}</pre>

Client/app/containers/counter/counter.component.ts

@@ -1,13 +1,33 @@
+// tslint:disable:no-null-keyword
+// tslint:disable:semicolon
+
 import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import * as fromRoot from '../../reducers';
+
+import { COUNTER_INCREASE, COUNTER_DECREASE } from '../../reducers/counter.reducer';
+import { CounterState } from '../../reducers/counter.reducer';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
  selector: 'counter',
  templateUrl: './counter.component.html'
 })
 export class CounterComponent {
- public currentCount = 0;
+ // public currentCount = 0;
+ public counter: Observable<CounterState>;
+
+ constructor(private _store: Store<fromRoot.State>) {
+ this.counter = _store.select<CounterState>('counter')
+ }
 
  public incrementCounter() {
- this.currentCount++;
+ // this.currentCount++;
+ this._store.dispatch({ type: COUNTER_INCREASE, payload: null })
+ }
+
+ public decreaseCounter() {
+ // this.currentCount++;
+ this._store.dispatch({ type: COUNTER_DECREASE, payload: null })
  }
 }

Client/app/reducers/counter.reducer.ts

@@ -0,0 +1,43 @@
+// tslint:disable:semicolon
+
+import { Action } from '@ngrx/store';
+
+// user actions
+export const COUNTER_INCREASE = '[COUNTER] increase'
+export const COUNTER_DECREASE = '[COUNTER] decrease'
+
+export class CounterState {
+ value: number
+}
+
+const initialState: CounterState = {
+ value: 0
+}
+
+export function reducer(state = initialState, action: Action): CounterState {
+
+ switch (action.type) {
+ case COUNTER_INCREASE: {
+
+ let newState = {
+ value: state.value + 1
+ }
+
+ return newState
+
+ }
+ case COUNTER_DECREASE:
+
+ let newState = {
+ value: state.value - 1
+ }
+
+ return newState
+
+ default:
+ return state
+ }
+}
+
+
+

Client/app/reducers/index.ts

@@ -0,0 +1,27 @@
+import { compose } from "@ngrx/core";
+import { combineReducers, ActionReducer } from "@ngrx/store";
+import { storeFreeze } from 'ngrx-store-freeze';
+
+import * as fromRouter from '@ngrx/router-store';
+import * as fromCounter from '../reducers/counter.reducer';
+
+export interface State {
+ router: fromRouter.RouterState;
+ counter: fromCounter.CounterState;
+}
+
+const reducers = {
+ router: fromRouter.routerReducer,
+ counter: fromCounter.reducer
+};
+
+const developmentReducer: ActionReducer<State> = compose(storeFreeze, combineReducers)(reducers);
+// const productionReducer: ActionReducer<State> = combineReducers(reducers);
+
+export function reducer(state: any, action: any) {
+ // if (environment.production) {
+ // return productionReducer(state, action);
+ // } else {
+ return developmentReducer(state, action);
+ // }
+}

README.md

@@ -12,6 +12,14 @@ Angular SEO in action:
  <img src="./docs/angular2-seo.png" alt="ASP.NET Core Angular2 SEO" title="ASP.NET Core Angular2 SEO">
 </p>
 
+NgRx Store with Redux DevTools:
+
+<p align="center">
+ <img src="./docs/ngrx-store.PNG" alt="NgRx store" title="NgRx Store">
+</p>
+
+https://github.com/zalmoxisus/redux-devtools-extension
+
 ### What is this repo? Live Demo here: http://aspnetcore-angular2-universal.azurewebsites.net
 
 This repository is maintained by [Angular Universal](https://github.com/angular/universal) and is meant to be an advanced starter 

package.json

@@ -34,6 +34,10 @@
  "@angular/platform-browser-dynamic": "^4.0.0",
  "@angular/platform-server": "^4.0.0",
  "@angular/router": "^4.0.0",
+ "@ngrx/core": "^1.2.0",
+ "@ngrx/router-store": "^1.2.6",
+ "@ngrx/store": "^2.2.2",
+ "@ngrx/store-devtools": "^3.2.4",
  "@ngx-translate/core": "^6.0.1",
  "@ngx-translate/http-loader": "0.0.3",
  "@types/node": "^7.0.12",
@@ -56,6 +60,7 @@
  "json-loader": "^0.5.4",
  "ng2-bootstrap": "^1.6.1",
  "ng2-signalr": "^2.0.2",
+ "ngrx-store-freeze": "^0.1.9",
  "node-sass": "^4.5.2",
  "preboot": "^4.5.2",
  "raw-loader": "^0.5.1",