chore(docs): Add note about actions and effects for router usage (#499)

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)

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