m10: router store feature

Author: alex-okrushko

.gitignore

@@ -5,6 +5,9 @@
 /tmp
 /out-tsc
 
+# line count
+/out
+
 # dependencies
 /node_modules
 

src/app/app.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { HomeModule } from './home/home.module';
-import { RoutingModule } from './routing.module';
+import { RoutingModule } from './router/routing.module';
 import { CartModule } from './cart/cart.module';
 import {
   MatToolbarModule,

src/app/router/custom-router-serializer.ts

@@ -0,0 +1,26 @@
+import { RouterStateSerializer } from '@ngrx/router-store';
+import { Params, RouterStateSnapshot } from '@angular/router';
+
+export interface RouterStateUrl {
+  url: string;
+  params: Params;
+}
+
+export class CustomRouterSerializer
+  implements RouterStateSerializer<RouterStateUrl> {
+  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
+    // Select all the params available from current state.
+    const params = routerState.root.children.map(c => c.params).reduce(
+      (acc, p) => ({
+        ...acc,
+        ...p,
+      }),
+      {}
+    );
+    return {
+      url: routerState.url,
+      // Collect params from all levels
+      params,
+    };
+  }
+}

src/app/router/routing.module.ts

@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { CartDetailsComponent } from '../cart-details/cart-details.component';
+import { HomeComponent } from '../home/home.component';
+import { ProductDetailsComponent } from '../product-details/product-details.component';
+
+import {
+  StoreRouterConnectingModule,
+  routerReducer,
+  RouterStateSerializer,
+  RouterReducerState,
+} from '@ngrx/router-store';
+import { StoreModule } from '@ngrx/store';
+import {
+  CustomRouterSerializer,
+  RouterStateUrl,
+} from './custom-router-serializer';
+import { ROUTER_FEATURE_KEY } from './selectors';
+
+const routes: Routes = [
+  { path: 'details/:productId', component: ProductDetailsComponent },
+  { path: 'cart', component: CartDetailsComponent },
+  { path: 'home', component: HomeComponent },
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+];
+
+const initialState: RouterReducerState<RouterStateUrl> = {
+  state: { url: '/', params: {} },
+  navigationId: -1,
+};
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes),
+    StoreModule.forFeature(ROUTER_FEATURE_KEY, routerReducer, { initialState }),
+    StoreRouterConnectingModule.forRoot({
+      stateKey: ROUTER_FEATURE_KEY,
+    }),
+  ],
+  exports: [RouterModule],
+  providers: [
+    { provide: RouterStateSerializer, useClass: CustomRouterSerializer },
+  ],
+})
+export class RoutingModule {}

src/app/router/selectors.ts

@@ -0,0 +1,19 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { RouterReducerState } from '@ngrx/router-store';
+import { RouterStateUrl } from './custom-router-serializer';
+
+export const ROUTER_FEATURE_KEY = 'Router feature';
+
+export const routerFeatureState = createFeatureSelector<
+  RouterReducerState<RouterStateUrl>
+>(ROUTER_FEATURE_KEY);
+
+export const routerState = createSelector(
+  routerFeatureState,
+  featureState => featureState.state
+);
+
+export const getRouterParams = createSelector(
+  routerState,
+  state => state.params
+);