diff --git a/docs/router-store/README.md b/docs/router-store/README.md index 4574848bc0..dda7886427 100644 --- a/docs/router-store/README.md +++ b/docs/router-store/README.md @@ -58,6 +58,7 @@ import { App } from './app.component'; }) export class AppModule { } ``` - ## API Documentation +- [Navigation actions](./api.md#navigation-actions) +- [Effects](./api.md#effects) - [Custom Router State Serializer](./api.md#custom-router-state-serializer) diff --git a/docs/router-store/api.md b/docs/router-store/api.md index cae95bf6a4..934df62059 100644 --- a/docs/router-store/api.md +++ b/docs/router-store/api.md @@ -1,5 +1,88 @@ # API +## Navigation actions +Navigation actions are not provided as part of the router package. You provide your own +custom navigation actions that use the `Router` within effects to navigate. + +```ts +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; +``` + +```ts +import * as RouterActions from './actions/router'; + +store.dispatch(new RouterActions.Go({ + path: ['/path', { routeParam: 1 }], + query: { page: 1 }, + extras: { replaceUrl: false } +}); + +store.dispatch(new RouterActions.Back()); + +store.dispatch(new RouterActions.Forward()); +``` +## Effects + +```ts +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/map'; +import { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; +import { Location } from '@angular/common'; +import { Effect, Actions } from '@ngrx/effects'; +import * as RouterActions from './actions/router'; + +@Injectable() +export class RouterEffects { + @Effect({ dispatch: false }) + navigate$ = this.actions$.ofType(RouterActions.GO) + .map((action: RouterActions.Go) => action.payload) + .do(({ path, query: queryParams, extras}) + => this.router.navigate(path, { queryParams, ...extras })); + + @Effect({ dispatch: false }) + navigateBack$ = this.actions$.ofType(RouterActions.BACK) + .do(() => this.location.back()); + + @Effect({ dispatch: false }) + navigateForward$ = this.actions$.ofType(RouterActions.FORWARD) + .do(() => this.location.forward()); + + constructor( + private actions$: Actions, + private router: Router, + private location: Location + ) {} +} +``` ## Custom Router State Serializer During each navigation cycle, a `RouterNavigationAction` is dispatched with a snapshot of the state in its payload, the `RouterStateSnapshot`. The `RouterStateSnapshot` is a large complex structure, containing many pieces of information about the current state and what's rendered by the router. This can cause performance