|
1 | 1 | # API
|
| 2 | +## Navigation actions |
2 | 3 |
|
| 4 | +Navigation actions are not provided as part of the router package. You provide your own |
| 5 | +custom navigation actions that use the `Router` within effects to navigate. |
| 6 | + |
| 7 | +```ts |
| 8 | +import { Action } from '@ngrx/store'; |
| 9 | +import { NavigationExtras } from '@angular/router'; |
| 10 | + |
| 11 | +export const GO = '[Router] Go'; |
| 12 | +export const BACK = '[Router] Back'; |
| 13 | +export const FORWARD = '[Router] Forward'; |
| 14 | + |
| 15 | +export class Go implements Action { |
| 16 | + readonly type = GO; |
| 17 | + |
| 18 | + constructor(public payload: { |
| 19 | + path: any[]; |
| 20 | + query?: object; |
| 21 | + extras?: NavigationExtras; |
| 22 | + }) {} |
| 23 | +} |
| 24 | + |
| 25 | +export class Back implements Action { |
| 26 | + readonly type = BACK; |
| 27 | +} |
| 28 | + |
| 29 | +export class Forward implements Action { |
| 30 | + readonly type = FORWARD; |
| 31 | +} |
| 32 | + |
| 33 | +export type Actions |
| 34 | + = Go |
| 35 | + | Back |
| 36 | + | Forward; |
| 37 | +``` |
| 38 | + |
| 39 | +```ts |
| 40 | +import * as RouterActions from './actions/router'; |
| 41 | + |
| 42 | +store.dispatch(new RouterActions.Go({ |
| 43 | + path: ['/path', { routeParam: 1 }], |
| 44 | + query: { page: 1 }, |
| 45 | + extras: { replaceUrl: false } |
| 46 | +}); |
| 47 | + |
| 48 | +store.dispatch(new RouterActions.Back()); |
| 49 | + |
| 50 | +store.dispatch(new RouterActions.Forward()); |
| 51 | +``` |
| 52 | +## Effects |
| 53 | +
|
| 54 | +```ts |
| 55 | +import 'rxjs/add/operator/do'; |
| 56 | +import 'rxjs/add/operator/map'; |
| 57 | +import { Injectable } from '@angular/core'; |
| 58 | +import { Router } from '@angular/router'; |
| 59 | +import { Location } from '@angular/common'; |
| 60 | +import { Effect, Actions } from '@ngrx/effects'; |
| 61 | +import * as RouterActions from './actions/router'; |
| 62 | + |
| 63 | +@Injectable() |
| 64 | +export class RouterEffects { |
| 65 | + @Effect({ dispatch: false }) |
| 66 | + navigate$ = this.actions$.ofType(RouterActions.GO) |
| 67 | + .map((action: RouterActions.Go) => action.payload) |
| 68 | + .do(({ path, query: queryParams, extras}) |
| 69 | + => this.router.navigate(path, { queryParams, ...extras })); |
| 70 | + |
| 71 | + @Effect({ dispatch: false }) |
| 72 | + navigateBack$ = this.actions$.ofType(RouterActions.BACK) |
| 73 | + .do(() => this.location.back()); |
| 74 | + |
| 75 | + @Effect({ dispatch: false }) |
| 76 | + navigateForward$ = this.actions$.ofType(RouterActions.FORWARD) |
| 77 | + .do(() => this.location.forward()); |
| 78 | + |
| 79 | + constructor( |
| 80 | + private actions$: Actions, |
| 81 | + private router: Router, |
| 82 | + private location: Location |
| 83 | + ) {} |
| 84 | +} |
| 85 | +``` |
3 | 86 | ## Custom Router State Serializer
|
4 | 87 |
|
5 | 88 | 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
|
|
0 commit comments