add router-store

package.json

@@ -48,6 +48,7 @@
     "@angular/service-worker": "5.1.2",
     "@ngrx/core": "1.2.0",
     "@ngrx/effects": "4.1.1",
+    "@ngrx/router-store": "4.1.1",
     "@ngrx/store": "4.1.1",
     "@ngrx/store-devtools": "4.1.1",
     "@ngx-translate/core": "9.0.2",
@@ -90,11 +91,11 @@
     "protractor": "5.2.2",
     "ts-node": "4.1.0",
     "tslint": "5.8.0",
-    "typescript": "2.6.2",
+    "typescript": "2.4.2",
     "wait-on": "2.0.2"
   },
   "resolutions": {
     "@angular/core": "5.1.2",
-    "typescript": "2.6.2"
+    "typescript": "2.4.2"
   }
 }

src/app/core/core.module.ts

@@ -1,6 +1,8 @@
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { EffectsModule } from '@ngrx/effects';
+import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
@@ -15,6 +17,8 @@ import { RuntimeEnvironmentService } from 'app/core/runtime-environment.service'
 import { httpLoaderFactory } from 'app/shared/helpers/aot.helper';
 import { metaReducers, reducers } from 'app/shared/states/root.reducer';
 import { environment } from 'environments/environment';
+import { RouterEffects } from '../shared/states/router/router.effects';
+import  {CustomSerializer } from '../shared/states/router/router.selector';
 
 /**
  * this module will be imported only once, in AppModule and shouldn't be imported from anywhere else
@@ -34,6 +38,7 @@ import { environment } from 'environments/environment';
       },
     }),
     StoreModule.forRoot(reducers, { metaReducers }),
+    StoreRouterConnectingModule,
     // it'd be nice to have the possibility to activate redux devtools
     // even if we're in prod but only with the extension
     // since ngrx v4, no idea how to do that
@@ -45,7 +50,8 @@ import { environment } from 'environments/environment';
     // --------------------------------------------------------------------
 
     // pass every effects here
-    // EffectsModule.forRoot([YOUR_EFFECTS_GOES_HERE]);
+    // EffectsModule.forRoot([RouterEffects, YOUR_EFFECTS_GOES_HERE]);
+    EffectsModule.forRoot([RouterEffects])
   ],
   providers: [
     {
@@ -57,6 +63,7 @@ import { environment } from 'environments/environment';
       useValue: ['en', 'fr'],
     },
     RuntimeEnvironmentService,
+    { provide: RouterStateSerializer, useClass: CustomSerializer },
   ],
 })
 export class CoreModule {}

src/app/shared/interfaces/store.interface.ts

@@ -1,5 +1,8 @@
+import * as fromRouter from '@ngrx/router-store';
 import { IUi } from 'app/shared/states/ui/ui.interface';
+import { RouterStateUrl } from '../states/router/router.selector';
 
 export interface IStore {
+  routerReducer: fromRouter.RouterReducerState<RouterStateUrl>;
   readonly ui: IUi;
 }

src/app/shared/states/root.reducer.ts

@@ -1,14 +1,15 @@
+import * as fromRouter from '@ngrx/router-store';
 import { ActionReducerMap } from '@ngrx/store';
-import { storeFreeze } from 'ngrx-store-freeze';
-import { enableBatching } from 'redux-batched-actions';
-
 import { IStore } from 'app/shared/interfaces/store.interface';
 import { uiReducer } from 'app/shared/states/ui/ui.reducer';
 import { environment } from 'environments/environment';
+import { storeFreeze } from 'ngrx-store-freeze';
+import { enableBatching } from 'redux-batched-actions';
 
 // ------------------------------------------------------------------------------
 
 export const reducers: ActionReducerMap<IStore> = {
+	routerReducer: fromRouter.routerReducer,
   // pass your reducers here
   ui: uiReducer,
 };

src/app/shared/states/router/router.actions.ts

@@ -0,0 +1,27 @@
+import { NavigationExtras } from '@angular/router';
+import { Action } from '@ngrx/store';
+
+export const GO = '[Router] Go';
+export const BACK = '[Router] Back';
+export const FORWARD = '[Router] Forward';
+
+export class Go implements Action {
+  readonly type = GO;
+  constructor(
+    public payload: {
+      path: any[];
+      query?: object;
+      extras?: NavigationExtras;
+    }
+  ) {}
+}
+
+export class Back implements Action {
+  readonly type = BACK;
+}
+
+export class Forward implements Action {
+  readonly type = FORWARD;
+}
+
+export type Actions = Go | Back | Forward;

src/app/shared/states/router/router.effects.ts

@@ -0,0 +1,33 @@
+import { Location } from '@angular/common';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Actions, Effect } from '@ngrx/effects';
+import { map, tap } from 'rxjs/operators';
+import * as RouterActions from './router.actions';
+
+@Injectable()
+export class RouterEffects {
+  constructor(
+    private actions$: Actions,
+    private router: Router,
+    private location: Location
+  ) {}
+
+  @Effect({ dispatch: false })
+  navigate$ = this.actions$.ofType(RouterActions.GO).pipe(
+    map((action: RouterActions.Go) => action.payload),
+    tap(({ path, query: queryParams, extras }) => {
+      this.router.navigate(path, { queryParams, ...extras });
+    })
+  );
+
+  @Effect({ dispatch: false })
+  navigateBack$ = this.actions$
+    .ofType(RouterActions.BACK)
+    .pipe(tap(() => this.location.back()));
+
+  @Effect({ dispatch: false })
+  navigateForward$ = this.actions$
+    .ofType(RouterActions.FORWARD)
+    .pipe(tap(() => this.location.forward()));
+}

src/app/shared/states/router/router.selector.ts

@@ -0,0 +1,27 @@
+import {  ActivatedRouteSnapshot,  Params,  RouterStateSnapshot} from '@angular/router';
+import * as fromRouter from '@ngrx/router-store';
+import { createFeatureSelector } from '@ngrx/store';
+
+export interface RouterStateUrl {
+  url: string;
+  queryParams: Params;
+  params: Params;
+}
+
+export const getRouterState = createFeatureSelector<fromRouter.RouterReducerState<RouterStateUrl>>('routerReducer');
+
+export class CustomSerializer
+  implements fromRouter.RouterStateSerializer<RouterStateUrl> {
+  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
+    const { url } = routerState;
+    const { queryParams } = routerState.root;
+
+    let state: ActivatedRouteSnapshot = routerState.root;
+    while (state.firstChild) {
+      state = state.firstChild;
+    }
+    const { params } = state;
+
+    return { url, queryParams, params };
+  }
+}

yarn.lock

@@ -228,6 +228,10 @@
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/@ngrx/effects/-/effects-4.1.1.tgz#cb758b8527964b258ea41951f59aa144e3ef9fae"
 
+"@ngrx/[email protected]":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@ngrx/router-store/-/router-store-4.1.1.tgz#17fac7c0f5ffddef8b75e9a74ed2cb09074f3bca"
+
 "@ngrx/[email protected]":
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/@ngrx/store-devtools/-/store-devtools-4.1.1.tgz#20745c39c7560fdc05fa4f22638442a7ec7dd676"
@@ -8410,9 +8414,9 @@ typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@2.6.2, typescript@~2.6.1:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
+typescript@2.4.2, typescript@~2.6.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.2.tgz#f8395f85d459276067c988aa41837a8f82870844"
 
 [email protected]:
   version "3.2.2"