ing

package.json

@@ -24,7 +24,9 @@
     "@angular/router": "^5.2.1",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^5.0.1",
+    "@ngrx/router-store": "^5.0.1",
     "@ngrx/store": "^5.0.0",
+    "@ngrx/store-devtools": "^5.0.1",
     "core-js": "^2.5.3",
     "hammerjs": "^2.0.8",
     "rxjs": "^5.5.6",

src/app/app.module.ts

@@ -1,13 +1,24 @@
+import { NgModule } from '@angular/core';
+
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+
+import { environment } from '../environments/environment';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 import { MaterialModule } from './commons/ui/material/material.module';
-import { AuthComponent } from './pages/auth/auth.component';
+import { SimpleRouterStateSerializer } from './commons/router/state/serializer/simple-router-state-serializer';
+import { reducers } from './app.reducers';
 
 @NgModule({
   declarations: [
@@ -17,9 +28,42 @@ import { AuthComponent } from './pages/auth/auth.component';
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
+    StoreModule.forRoot(reducers),
+    /**
+     * @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',
+      logOnly: environment.production,
+    }),
+    EffectsModule.forRoot([]),
     MaterialModule,
   ],
-  providers: [],
+  providers: [
+    /**
+     * The `RouterStateSnapshot` provided by the `Router` is a large complex structure.
+     * A custom RouterStateSerializer is used to parse the `RouterStateSnapshot` provided
+     * by `@ngrx/router-store` to include only the desired pieces of the snapshot.
+     */
+    { provide: RouterStateSerializer, useClass: SimpleRouterStateSerializer },
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.reducers.ts

@@ -0,0 +1,6 @@
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import { AppState } from './app.state';
+
+export const reducers: ActionReducerMap<AppState> = {
+};

src/app/app.state.ts

@@ -0,0 +1,3 @@
+export interface AppState {
+
+}

src/app/commons/router/state/serializer/simple-router-state-serializer.ts

@@ -0,0 +1,34 @@
+import { RouterStateSerializer } from '@ngrx/router-store';
+import { RouterStateSnapshot, Params } from '@angular/router';
+
+/**
+ * The RouterStateSerializer takes the current RouterStateSnapshot
+ * and returns any pertinent information needed. The snapshot contains
+ * all information about the state of the router at the given point in time.
+ * The entire snapshot is complex and not always needed. In this case, you only
+ * need the URL and query parameters from the snapshot in the store. Other items could be
+ * returned such as route parameters and static route data.
+ */
+
+export interface RouterStateURL {
+  url: string;
+  params: Params;
+  queryParams: Params;
+}
+
+export class SimpleRouterStateSerializer implements RouterStateSerializer<RouterStateURL> {
+  serialize(routerState: RouterStateSnapshot): RouterStateURL {
+    let route = routerState.root;
+
+    while (route.firstChild) {
+      route = route.firstChild;
+    }
+
+    const { url, root: { queryParams } } = routerState;
+    const { params } = route;
+
+    // Only return an object including the URL, params and query params
+    // instead of the entire snapshot
+    return { url, params, queryParams };
+  }
+}

yarn.lock

@@ -172,6 +172,14 @@
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@ngrx/effects/-/effects-5.0.1.tgz#cf970a6b8e2f3d3647e795e7040e09a2e7d157ed"
 
+"@ngrx/router-store@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@ngrx/router-store/-/router-store-5.0.1.tgz#db872327bb958a2ebf296734c97de68672ec628a"
+
+"@ngrx/store-devtools@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@ngrx/store-devtools/-/store-devtools-5.0.1.tgz#f1bf5c54d4b2a512afd970e8114057b44e0d3c16"
+
 "@ngrx/store@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-5.0.0.tgz#483a955ea99a63ee083675ce0596d505e5501747"