From 985a4c2013340322b85a03c1db275d1c7e4b1326 Mon Sep 17 00:00:00 2001 From: crusader Date: Mon, 29 Jan 2018 13:22:32 +0900 Subject: [PATCH] ing --- package.json | 2 + src/app/app.module.ts | 50 +++++++++++++++++-- src/app/app.reducers.ts | 6 +++ src/app/app.state.ts | 3 ++ .../simple-router-state-serializer.ts | 34 +++++++++++++ yarn.lock | 8 +++ 6 files changed, 100 insertions(+), 3 deletions(-) create mode 100644 src/app/app.reducers.ts create mode 100644 src/app/app.state.ts create mode 100644 src/app/commons/router/state/serializer/simple-router-state-serializer.ts diff --git a/package.json b/package.json index 416e294..c5c1c10 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0440fa4..42c025a 100644 --- a/src/app/app.module.ts +++ b/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 { } diff --git a/src/app/app.reducers.ts b/src/app/app.reducers.ts new file mode 100644 index 0000000..fb5eba7 --- /dev/null +++ b/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 = { +}; diff --git a/src/app/app.state.ts b/src/app/app.state.ts new file mode 100644 index 0000000..296d4e6 --- /dev/null +++ b/src/app/app.state.ts @@ -0,0 +1,3 @@ +export interface AppState { + +} diff --git a/src/app/commons/router/state/serializer/simple-router-state-serializer.ts b/src/app/commons/router/state/serializer/simple-router-state-serializer.ts new file mode 100644 index 0000000..0b953b7 --- /dev/null +++ b/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 { + 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 }; + } +} diff --git a/yarn.lock b/yarn.lock index decb365..d200327 100644 --- a/yarn.lock +++ b/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"