ngrx/store

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>[] = [
+
+];