Installation and set up

The router store is in an NPM package and we can therefore type the following to install it:

npm install @ngrx/router-store --save

The next thing we need to do is to import the correct modules and set those up in the import properties of our root module, like so:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injectable } from '@angular/core';
import { StoreModule, Action } from '@ngrx/store';
import { AppComponent } from './app.component';
import { counterReducer } from './reducer';
import { TodoModule } from './todo/todo.module';
import { todosReducer } from './todo/reducer';
import { JediModule } from './jedi/jedi.module';
import { jediListReducer } from './jedi/list.reducer';
import { productsReducer } from './products/products.reducer';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { ProductsModule } from './products/products.module';
import { StoreRouterConnectingModule, routerReducer } from '@ngrx/router-store';
import { RouterModule } from '@angular/router';
import { TestingComponent } from './testing.component';
import { Effect, ofType, Actions } from '@ngrx/effects';
import { Observable } from 'rxjs/Observable';
import { switchMap } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { EffectsModule } from '@ngrx/effects';

@NgModule({
declarations: [AppComponent, TestingComponent],
imports: [
BrowserModule,
StoreModule.forRoot({
count: counterReducer,
todos: todosReducer,
jediList: jediListReducer,
products: productsReducer,
router: routerReducer
}),
EffectsModule.forRoot([]),
RouterModule.forRoot([{ path: 'testing', component: TestingComponent }]),
StoreRouterConnectingModule.forRoot({
stateKey: 'router' // name of reducer key
}),

StoreDevtoolsModule.instrument({
maxAge: 25 // Retains last 25 states
}),
TodoModule,
JediModule,
ProductsModule
],
bootstrap: [AppComponent]
})
export class AppModule {}

We don't do a lot here. We call the forRoot() method on the StoreRouterConnectingModule, and we also add a new reducer entry in the form of a router that points to routerReducer as the reducer that will handle any changes to the router property. 

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.65.134