ngrx/store

angular.json

@@ -144,5 +144,8 @@
       }
     }
   },
-  "defaultProject": "scanner-app"
+  "defaultProject": "scanner-app",
+  "cli": {
+    "defaultCollection": "@ngrx/schematics"
+  }
 }

package.json

@@ -34,6 +34,11 @@
     "@angular/router": "^6.1.0",
     "@angularclass/hmr": "^2.1.3",
     "@loafer/angular-cli-webpack": "0.0.1",
+    "@ngrx/effects": "^6.1.0",
+    "@ngrx/router-store": "^6.1.0",
+    "@ngrx/schematics": "^6.1.0",
+    "@ngrx/store": "^6.1.0",
+    "@ngrx/store-devtools": "^6.1.0",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
@@ -57,6 +62,7 @@
     "karma-coverage-istanbul-reporter": "~2.0.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-jasmine": "~1.1.1",
+    "ngrx-store-freeze": "^0.2.4",
     "npm-run-all": "^4.1.3",
     "primeng": "^6.0.0",
     "primer-support": "^4.0.0",

src/app/app-store.module.ts

@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+
+
+import { environment } from '../environments/environment';
+import { reducers, metaReducers, effects } from '../commons/store';
+
+@NgModule({
+  exports: [
+    StoreModule,
+  ],
+  imports: [
+    StoreModule.forRoot(reducers, { metaReducers }),
+    /**
+     * @ngrx/router-store keeps router state up-to-date in the store.
+     */
+    StoreRouterConnectingModule.forRoot({
+      /*
+        They stateKey defines the name of the state used by the router-store reducer.
+        This matches the key defined in the map of reducers
+      */
+      stateKey: 'router',
+    }),
+    /**
+     * Store devtools instrument the store retaining past versions of state
+     * and recalculating new states. This enables powerful time-travel
+     * debugging.
+     *
+     * To use the debugger, install the Redux Devtools extension for either
+     * Chrome or Firefox
+     *
+     * See: https://github.com/zalmoxisus/redux-devtools-extension
+     */
+    StoreDevtoolsModule.instrument({
+      name: 'overFlow WebApp DevTools',
+      maxAge: 50,
+      logOnly: environment.production,
+    }),
+    EffectsModule.forRoot(effects),
+  ],
+  providers: [
+  ],
+
+})
+export class AppStoreModule { }

src/app/app.module.ts

@@ -5,6 +5,8 @@ import { NgModule } from '@angular/core';
 import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
 
 import { AppRoutingModule } from './app-routing.module';
+import { AppStoreModule } from './app-store.module';
+
 import { AppComponent } from './app.component';
 
 import { CommonsModule } from '../commons/commons.module';
@@ -15,11 +17,14 @@ import { CommonsModule } from '../commons/commons.module';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule,
     BrowserAnimationsModule,
 
     CommonsUIModule,
     CommonsModule,
+
+    AppRoutingModule,
+    AppStoreModule,
+
   ],
   providers: [],
   bootstrap: [AppComponent]

src/commons/store/index.ts

@@ -0,0 +1,40 @@
+import { Type } from '@angular/core';
+
+import {
+  ActionReducer,
+  ActionReducerMap,
+  createFeatureSelector,
+  createSelector,
+  MetaReducer
+} from '@ngrx/store';
+
+import { environment } from '../../environments/environment';
+import * as fromRouter from '@ngrx/router-store';
+
+import { storeFreeze } from 'ngrx-store-freeze';
+
+export interface State {
+  router: fromRouter.RouterReducerState;
+}
+
+export const reducers: ActionReducerMap<State> = {
+  router: fromRouter.routerReducer,
+};
+
+// console.log all actions
+export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
+  return function (state: State, action: any): State {
+    console.log('state', state);
+    console.log('action', action);
+
+    return reducer(state, action);
+  };
+}
+
+export const metaReducers: MetaReducer<State>[] = !environment.production
+  ? [logger, storeFreeze]
+  : [];
+
+export const effects: Type<any>[] = [
+
+];

yarn.lock

@@ -195,6 +195,26 @@
   dependencies:
     "@types/lodash" "^4.14.112"
 
+"@ngrx/effects@^6.1.0":
+  version "6.1.0"
+  resolved "https://nexus.loafle.net/repository/npm-all/@ngrx/effects/-/effects-6.1.0.tgz#3c1e1ab1e5a86c6d9c29d4f3771e42cc9bd8576c"
+
+"@ngrx/router-store@^6.1.0":
+  version "6.1.0"
+  resolved "https://nexus.loafle.net/repository/npm-all/@ngrx/router-store/-/router-store-6.1.0.tgz#a225de3fbb262429561d722e139dde7efdcf0cea"
+
+"@ngrx/schematics@^6.1.0":
+  version "6.1.0"
+  resolved "https://nexus.loafle.net/repository/npm-all/@ngrx/schematics/-/schematics-6.1.0.tgz#4e784da5502829700895ca87d4cc5da93bf3ec84"
+
+"@ngrx/store-devtools@^6.1.0":
+  version "6.1.0"
+  resolved "https://nexus.loafle.net/repository/npm-all/@ngrx/store-devtools/-/store-devtools-6.1.0.tgz#cf65a3149628dc37badd094204484dde9ba14200"
+
+"@ngrx/store@^6.1.0":
+  version "6.1.0"
+  resolved "https://nexus.loafle.net/repository/npm-all/@ngrx/store/-/store-6.1.0.tgz#5b027647a797bf027912568214b10375dd75af38"
+
 "@ngtools/webpack@6.1.3":
   version "6.1.3"
   resolved "https://nexus.loafle.net/repository/npm-all/@ngtools/webpack/-/webpack-6.1.3.tgz#dbf0d602675f6ee0dcf815817a2518783a47cf12"
@@ -1837,6 +1857,10 @@ deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://nexus.loafle.net/repository/npm-all/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
 
+deep-freeze-strict@^1.1.1:
+  version "1.1.1"
+  resolved "https://nexus.loafle.net/repository/npm-all/deep-freeze-strict/-/deep-freeze-strict-1.1.1.tgz#77d0583ca24a69be4bbd9ac2fae415d55523e5b0"
+
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://nexus.loafle.net/repository/npm-all/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -4613,6 +4637,12 @@ next-tick@1:
   version "1.0.0"
   resolved "https://nexus.loafle.net/repository/npm-all/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
 
+ngrx-store-freeze@^0.2.4:
+  version "0.2.4"
+  resolved "https://nexus.loafle.net/repository/npm-all/ngrx-store-freeze/-/ngrx-store-freeze-0.2.4.tgz#146687cdf7e21244eb9003c7e883f2125847076c"
+  dependencies:
+    deep-freeze-strict "^1.1.1"
+
 nice-try@^1.0.4:
   version "1.0.4"
   resolved "https://nexus.loafle.net/repository/npm-all/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"