add functionality to ngrx router/store

Author: qdouble

src/app/actions/router.ts

@@ -0,0 +1,29 @@
+import { Action } from '@ngrx/store';
+import { NavigationExtras } from '@angular/router';
+
+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/app.component.ts

@@ -1,10 +1,13 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TransferState } from '../modules/transfer-state/transfer-state';
+import { Store, select } from '@ngrx/store';
 
 import { views } from './app-nav-views';
 import { MOBILE } from './services/constants';
 
+import * as fromRoot from './reducers';
+
 @Component({
  selector: 'my-app',
  styleUrls: ['main.scss', './app.component.scss'],
@@ -22,11 +25,14 @@ export class AppComponent implements OnInit {
  constructor(
  private cache: TransferState,
  public route: ActivatedRoute,
- public router: Router
+ public router: Router,
+ public store: Store<fromRoot.AppState>
  ) { }
 
  ngOnInit() {
  this.cache.set('cached', true);
+ let a = this.store.pipe(select(fromRoot.getUserLoaded));
+ a.subscribe(l => console.log(l));
  }
 
  activateEvent(event) {

src/app/app.imports.ts

@@ -12,9 +12,9 @@ import { TransferHttpModule } from '../modules/transfer-http/transfer-http.modul
 
 import { DEV_REDUCERS, syncReducers, resetOnLogout, AppState } from './reducers';
 import { StoreDevToolsModule } from './features/store-devtools.module';
+import { RouterEffects } from './effects/router';
 import { UserEffects } from './user/user.effects';
 import { userReducer } from './user/user.reducer';
-import { storeFreeze } from 'ngrx-store-freeze';
 
 const STORE_DEV_TOOLS_IMPORTS = [];
 if (ENV === 'development' && !AOT &&
@@ -32,11 +32,16 @@ export const metaReducers: MetaReducer<AppState>[] = ENV === 'development' ?
  [...DEV_REDUCERS, resetOnLogout] : [resetOnLogout];
 
 export const APP_IMPORTS = [
- EffectsModule.forRoot([UserEffects]),
+ EffectsModule.forRoot([
+ RouterEffects,
+ UserEffects
+ ]),
  MaterialModule,
  ReactiveFormsModule,
  StoreModule.forRoot(syncReducers, { metaReducers }),
- StoreRouterConnectingModule,
+ StoreRouterConnectingModule.forRoot({
+ stateKey: 'router' // name of reducer key
+ }),
  STORE_DEV_TOOLS_IMPORTS,
  StoreDevToolsModule,
  TransferHttpModule

src/app/effects/router.ts

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

src/app/reducers/index.ts

@@ -1,10 +1,17 @@
-import { StoreModule, ActionReducerMap, MetaReducer } from '@ngrx/store';
+import {
+ StoreModule,
+ ActionReducerMap,
+ MetaReducer,
+ createFeatureSelector,
+ createSelector
+} from '@ngrx/store';
 import { Params, RouterStateSnapshot } from '@angular/router';
 import { compose } from '@ngrx/store';
 import { ActionReducer, combineReducers } from '@ngrx/store';
 import { storeFreeze } from 'ngrx-store-freeze';
 import { storeLogger } from 'ngrx-store-logger';
 import { routerReducer, RouterReducerState, RouterStateSerializer } from '@ngrx/router-store';
+import * as fromRouter from '@ngrx/router-store';
 
 import * as fromUser from '../user/user.reducer';
 
@@ -20,7 +27,7 @@ const modules = {
 };
 
 export interface AppState {
- router: RouterReducerState<RouterStateUrl>;
+ router: fromRouter.RouterReducerState<RouterStateUrl>;
  user: fromUser.UserState;
 }
 
@@ -29,16 +36,22 @@ export const syncReducers = {
  user: fromUser.userReducer
 };
 
+export const getUserState = createFeatureSelector<fromUser.UserState>('user');
+
+export const getUserLoaded = createSelector(
+ getUserState,
+ fromUser.getLoaded
+);
+
 export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
  let route = routerState.root;
  while (route.firstChild) {
  route = route.firstChild;
  }
 
- const { url } = routerState;
- const queryParams = routerState.root.queryParams;
- const params = route.params;
+ const { url, root: { queryParams } } = routerState;
+ const { params } = route;
 
  // Only return an object including the URL, params and query params
  // instead of the entire snapshot
@@ -65,7 +78,7 @@ const createReducer = (asyncReducers = {}) => {
 
 // Generate a reducer to set the root state in dev mode for HMR
 function stateSetter(reducer: ActionReducer<any>): ActionReducer<any> {
- return function(state: any, action: any) {
+ return function (state: any, action: any) {
  if (action.type === 'SET_ROOT_STATE') {
  return action.payload;
  }
@@ -74,15 +87,15 @@ function stateSetter(reducer: ActionReducer<any>): ActionReducer<any> {
 }
 
 function logout(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
- return function(state: AppState, action: any): AppState {
+ return function (state: AppState, action: any): AppState {
  if (action.type === '[User] Logout Success') {
  state = undefined;
  }
  return reducer(state, action);
  };
 }
 
-export function resetOnLogout (reducer: ActionReducer<AppState>): ActionReducer<AppState> {
+export function resetOnLogout(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
  return function (state, action) {
  let newState;
  if (action.type === '[User] Logout Success') {

src/app/user/user.reducer.ts

@@ -31,3 +31,5 @@ export function userReducer(state = initialState, action: UserActions): UserStat
  }
  }
 }
+
+export const getLoaded = (state: UserState) => state.loaded;