Skip to content

Commit 44b6822

Browse files
glendaviesnzbrandonroberts
authored andcommitted
chore(docs): Add note about actions and effects for router usage (ngrx#499)
1 parent 3dc5e1f commit 44b6822

File tree

2 files changed

+85
-1
lines changed

2 files changed

+85
-1
lines changed

docs/router-store/README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import { App } from './app.component';
5858
})
5959
export class AppModule { }
6060
```
61-
6261
## API Documentation
62+
- [Navigation actions](./api.md#navigation-actions)
63+
- [Effects](./api.md#effects)
6364
- [Custom Router State Serializer](./api.md#custom-router-state-serializer)

docs/router-store/api.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,88 @@
11
# API
2+
## Navigation actions
23

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+
```
386
## Custom Router State Serializer
487
588
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

Comments
 (0)