From 06aeac4f12e143a7af8703b859d7a3e87e5a621e Mon Sep 17 00:00:00 2001
From: Brandon <robertsbt@gmail.com>
Date: Wed, 3 Jan 2018 06:45:10 -0800
Subject: [PATCH] chore(docs): Update documentation with enums and lettable
 operators (#677)

---
 docs/effects/README.md        | 47 +++++++++---------
 docs/effects/api.md           | 79 ++++++++++---------------------
 docs/effects/testing.md       |  3 +-
 docs/entity/README.md         |  1 -
 docs/entity/adapter.md        | 89 +++++++++++++++++++----------------
 docs/entity/interfaces.md     |  4 +-
 docs/router-store/README.md   | 14 +++---
 docs/router-store/api.md      | 28 ++++++-----
 docs/store-devtools/README.md | 15 +++---
 docs/store/README.md          |  6 +--
 docs/store/actions.md         | 40 ++++++++--------
 docs/store/api.md             | 14 +++---
 docs/store/selectors.md       |  4 +-
 docs/store/setup.md           |  4 +-
 docs/store/testing.md         |  4 +-
 15 files changed, 167 insertions(+), 185 deletions(-)

diff --git a/docs/effects/README.md b/docs/effects/README.md
index cec638a0c6..1f0bed82c3 100644
--- a/docs/effects/README.md
+++ b/docs/effects/README.md
@@ -6,8 +6,7 @@ RxJS powered side effect model for @ngrx/store
 
 - Listen for actions dispatched from @ngrx/store
 - Isolate side effects from components, allowing for more _pure_ components that select state and dispatch actions
-- Provide new sources of actions to reduce state based on external
-interactions such as network requests, web socket messages and time-based events.
+- Provide [new sources](https://martinfowler.com/eaaDev/EventSourcing.html) of actions to reduce state based on external interactions such as network requests, web socket messages and time-based events.
 
 ### Installation
 Install @ngrx/effects from npm:
@@ -25,45 +24,45 @@ Effects are injectable service classes that use two main APIs.
 
 ### Effect decorator
 
-Use the `@Effect()` decorator to hint to @ngrx/effects observable side-effects
-on the effects class. @ngrx/effects dispatches actions emitted by every decorated
-effect to the store.
+The `@Effect()` decorator provides metadata to register observable side-effects in the effects class. Registered effects provide new actions provided by the source Observable to the store.
 
 ### Actions Observable
 
-The `Actions` observable represents an observable of all actions dispatched to the
-store. The `ofType` operator lets you filter for actions of a certain type in which you
-want to use to perform a side effect.
+- Represents an observable of all actions dispatched to the store.
+- Emits the latest action _after_ the action has passed through all reducers.
+- The `ofType` operator lets you filter for actions of a certain type in which you want to use to perform a side effect.
 
 ## Example
 1. Create an AuthEffects service that describes a source of login actions:
 
 ```ts
-// ./effects/auth.ts
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/mergeMap';
-import 'rxjs/add/operator/catch';
+// ./effects/auth.effects.ts
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
-import { Observable } from 'rxjs/Observable';
+import { HttpClient } from '@angular/common/http';
 import { Action } from '@ngrx/store';
-import { Actions, Effect } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
+import { catchError, map, mergeMap } from 'rxjs/operators';
 
 @Injectable()
 export class AuthEffects {
   // Listen for the 'LOGIN' action
-  @Effect() login$: Observable<Action> = this.actions$.ofType('LOGIN')
-    .mergeMap(action =>
-      this.http.post('/auth', action.payload)
+  @Effect() login$: Observable<Action> = this.actions$.pipe(
+    ofType('LOGIN'),
+    mergeMap(action =>
+      this.http.post('/auth', action.payload).pipe(
         // If successful, dispatch success action with result
-        .map(data => ({ type: 'LOGIN_SUCCESS', payload: data }))
+        map(data => ({ type: 'LOGIN_SUCCESS', payload: data }))
         // If request fails, dispatch failed action
-        .catch(() => of({ type: 'LOGIN_FAILED' }))
-    );
+        catchError(() => of({ type: 'LOGIN_FAILED' }))
+      )
+    )
+  );
+  
 
   constructor(
-    private http: Http,
+    private http: HttpClient,
     private actions$: Actions
   ) {}
 }
@@ -74,7 +73,7 @@ your root `NgModule` for the effects providers to be registered and start when y
 
 ```ts
 import { EffectsModule } from '@ngrx/effects';
-import { AuthEffects } from './effects/auth';
+import { AuthEffects } from './effects/auth.effects';
 
 @NgModule({
   imports: [
@@ -90,7 +89,7 @@ For feature modules, register your effects via `EffectsModule.forFeature` method
 
 ```ts
 import { EffectsModule } from '@ngrx/effects';
-import { AdminEffects } from './effects/admin';
+import { AdminEffects } from './effects/admin.effects';
 
 @NgModule({
   imports: [
diff --git a/docs/effects/api.md b/docs/effects/api.md
index d521414251..da692a0910 100644
--- a/docs/effects/api.md
+++ b/docs/effects/api.md
@@ -59,18 +59,18 @@ Filter actions by action types. Specify the action type to allow type-safe mappi
 
 Usage:
 ```ts
-import 'rxjs/add/operator/do';
 import { Injectable } from '@angular/core';
-import { Actions, Effect } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { tap } from 'rxjs/operators';
 
 @Injectable()
 export class SomeEffectsClass {
   constructor(private actions$: Actions) {}
 
-  @Effect() authActions$ = this.action$.ofType<LoginAction | LogoutAction>('LOGIN', 'LOGOUT')
-    .do(action => {
-      console.log(action);
-    });
+  @Effect() authActions$ = this.action$.pipe(
+    ofType<LoginAction | LogoutAction>('LOGIN', 'LOGOUT'),
+    tap(action => console.log(action))
+  );
 }
 ```
 
@@ -79,18 +79,17 @@ Pass `{ dispatch: false }` to the decorator to prevent dispatching.
 
 Usage:
 ```ts
-import 'rxjs/add/operator/do';
 import { Injectable } from '@angular/core';
-import { Actions, Effect } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { tap } from 'rxjs/operators';
 
 @Injectable()
 export class SomeEffectsClass {
   constructor(private actions$: Actions) { }
 
-  @Effect({ dispatch: false }) logActions$ = this.actions$
-    .do(action => {
-      console.log(action);
-    });
+  @Effect({ dispatch: false }) logActions$ = this.actions$.pipe(
+    tap(action => console.log(action))
+  );
 }
 ```
 
@@ -101,64 +100,36 @@ By default, effects are merged and subscribed to the store. Implement the `OnRun
 
 Usage:
 ```ts
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/exhaustMap';
-import 'rxjs/add/operator/takeUntil';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Actions, Effect, OnRunEffects, EffectNotification, ofType } from '@ngrx/effects';
 import { Action } from '@ngrx/store';
-import { Actions, Effect, OnRunEffects, EffectNotification } from '@ngrx/effects';
+import { Observable } from 'rxjs/Observable';
+import { exhaustMap, takeUntil, tap } from 'rxjs/operators';
 
 @Injectable()
 export class UserEffects implements OnRunEffects {
   constructor(private actions$: Actions) {}
 
-  @Effect() updateUser$: Observable<Action> = this.actions$
-    .ofType('UPDATE_USER')
-    .do(action => {
+  @Effect() updateUser$: Observable<Action> = this.actions$.pipe(
+    ofType('UPDATE_USER'),
+    tap(action => {
       console.log(action);
-    });
+    })
+  );
 
   ngrxOnRunEffects(resolvedEffects$: Observable<EffectNotification>) {
-    return this.actions$.ofType('LOGGED_IN')
-      .exhaustMap(() => resolvedEffects$.takeUntil(this.actions$.ofType('LOGGED_OUT')));
+    return this.actions$.pipe(
+      ofType('LOGGED_IN'),
+      exhaustMap(() => resolvedEffects$.pipe(
+        takeUntil(this.actions$.pipe(ofType('LOGGED_OUT')))
+      )
+    );
   }
 }
 ```
 
 ## Utilities
 
-### toPayload (DEPRECATED)
-Maps an action to its payload. This function is deprecated, and will be removed in version 5.0.
-
-Usage:
-```ts
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/map';
-import { Injectable } from '@angular/core';
-import { Actions, Effect, toPayload } from '@ngrx/effects';
-
-@Injectable()
-export class SomeEffectsClass {
-  constructor(private actions$: Actions) {}
-
-  @Effect() authActions$ = this.action$.ofType('LOGIN', 'LOGOUT')
-    .map(toPayload)
-    .do(payload => {
-      console.log(payload);
-    });
-}
-```
-
-Recommended alternative to deprecated toPayload function. Note that the type
-of the action is specified so that mapping to payload (or whatever data is available in the action) is type-safe.
-```ts
-  @Effect() authActions$ = this.action$.ofType<LoadingAction | LogoutAction>('LOGIN', 'LOGOUT')
-    .map(action => action.payload)
-    .do(payload => {
-      console.log(payload);
-```
-
 ### mergeEffects
 Manually merges all decorated effects into a combined observable.
 
diff --git a/docs/effects/testing.md b/docs/effects/testing.md
index 44fc60eb4d..7414765bcc 100644
--- a/docs/effects/testing.md
+++ b/docs/effects/testing.md
@@ -4,8 +4,7 @@
 
 ### provideMockActions
 Provides a mock test provider of the `Actions` Observable for testing effects. This works well with writing
-marble tests and tests using the `subscribe` method on an Observable. The mock Actions will deliver a new Observable
-to subscribe to for each test.
+marble tests and tests using the `subscribe` method on an Observable. The mock Actions will deliver a new Observable to subscribe to for each test.
 
 Details on marble tests and their syntax, as shown in the `hot` and `cold` methods, can be found in [Writing Marble Tests](https://github.com/ReactiveX/rxjs/blob/master/doc/writing-marble-tests.md).
 
diff --git a/docs/entity/README.md b/docs/entity/README.md
index 14c16bb93e..75519d212a 100644
--- a/docs/entity/README.md
+++ b/docs/entity/README.md
@@ -13,7 +13,6 @@ Install @ngrx/entity from npm:
 
 `npm install @ngrx/entity --save` OR `yarn add @ngrx/entity`
 
-
 ### Nightly builds
 
 `npm install github:ngrx/entity-builds` OR `yarn add github:ngrx/entity-builds`
diff --git a/docs/entity/adapter.md b/docs/entity/adapter.md
index 7219cc492d..fd1a39c918 100644
--- a/docs/entity/adapter.md
+++ b/docs/entity/adapter.md
@@ -106,62 +106,64 @@ import { Update } from '@ngrx/entity';
 
 import { User } from './user.model';
 
-export const LOAD_USERS = '[User] Load Users';
-export const ADD_USER = '[User] Add User';
-export const ADD_USERS = '[User] Add Users';
-export const UPDATE_USER = '[User] Update User';
-export const UPDATE_USERS = '[User] Update Users';
-export const DELETE_USER = '[User] Delete User';
-export const DELETE_USERS = '[User] Delete Users';
-export const CLEAR_USERS = '[User] Clear Users';
+export enum UserActionTypes {
+  LOAD_USERS = '[User] Load Users',
+  ADD_USER = '[User] Add User',
+  ADD_USERS = '[User] Add Users',
+  UPDATE_USER = '[User] Update User',
+  UPDATE_USERS = '[User] Update Users',
+  DELETE_USER = '[User] Delete User',
+  DELETE_USERS = '[User] Delete Users',
+  CLEAR_USERS = '[User] Clear Users'
+}
 
 export class LoadUsers implements Action {
-  readonly type = LOAD_USERS;
+  readonly type = UserActionTypes.LOAD_USERS;
 
   constructor(public payload: { users: User[] }) {}
 }
 
 export class AddUser implements Action {
-  readonly type = ADD_USER;
+  readonly type = UserActionTypes.ADD_USER;
 
   constructor(public payload: { user: User }) {}
 }
 
 export class AddUsers implements Action {
-  readonly type = ADD_USERS;
+  readonly type = UserActionTypes.ADD_USERS;
 
   constructor(public payload: { users: User[] }) {}
 }
 
 export class UpdateUser implements Action {
-  readonly type = UPDATE_USER;
+  readonly type = UserActionTypes.UPDATE_USER;
 
   constructor(public payload: { user: Update<User> }) {}
 }
 
 export class UpdateUsers implements Action {
-  readonly type = UPDATE_USERS;
+  readonly type = UserActionTypes.UPDATE_USERS;
 
   constructor(public payload: { users: Update<User>[] }) {}
 }
 
 export class DeleteUser implements Action {
-  readonly type = DELETE_USER;
+  readonly type = UserActionTypes.DELETE_USER;
 
   constructor(public payload: { id: string }) {}
 }
 
 export class DeleteUsers implements Action {
-  readonly type = DELETE_USERS;
+  readonly type = UserActionTypes.DELETE_USERS;
 
   constructor(public payload: { ids: string[] }) {}
 }
 
 export class ClearUsers implements Action {
-  readonly type = CLEAR_USERS;
+  readonly type = UserActionTypes.CLEAR_USERS;
 }
 
-export type All =
+export type UserActions =
  LoadUsers
  | AddUser
  | AddUsers
@@ -176,7 +178,7 @@ export type All =
 ```ts
 import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
 import { User } from './user.model';
-import * as UserActions from './user.actions';
+import { UserActions, UserActionTypes } from './user.actions';
 
 export interface State extends EntityState<User> {
   // additional entities state properties
@@ -192,38 +194,38 @@ export const initialState: State = adapter.getInitialState({
 
 export function reducer(
   state = initialState,
-  action: UserActions.All
+  action: UserActions
 ): State {
   switch (action.type) {
-    case UserActions.ADD_USER: {
+    case UserActionTypes.ADD_USER: {
       return adapter.addOne(action.payload.user, state);
     }
 
-    case UserActions.ADD_USERS: {
+    case UserActionTypes.ADD_USERS: {
       return adapter.addMany(action.payload.users, state);
     }
 
-    case UserActions.UPDATE_USER: {
+    case UserActionTypes.UPDATE_USER: {
       return adapter.updateOne(action.payload.user, state);
     }
 
-    case UserActions.UPDATE_USERS: {
+    case UserActionTypes.UPDATE_USERS: {
       return adapter.updateMany(action.payload.users, state);
     }
 
-    case UserActions.DELETE_USER: {
+    case UserActionTypes.DELETE_USER: {
       return adapter.removeOne(action.payload.id, state);
     }
 
-    case UserActions.DELETE_USERS: {
+    case UserActionTypes.DELETE_USERS: {
       return adapter.removeMany(action.payload.ids, state);
     }
 
-    case UserActions.LOAD_USERS: {
+    case UserActionTypes.LOAD_USERS: {
       return adapter.addAll(action.payload.users, state);
     }
 
-    case UserActions.CLEAR_USERS: {
+    case UserActionTypes.CLEAR_USERS: {
       return adapter.removeAll({ ...state, selectedUserId: null });
     }
 
@@ -234,6 +236,20 @@ export function reducer(
 }
 
 export const getSelectedUserId = (state: State) => state.selectedUserId;
+
+export const {
+  // select the array of user ids
+  selectIds: selectUserIds,
+
+  // select the dictionary of user entities
+  selectEntities: selectUserEntities,
+
+  // select the array of users
+  selectAll: selectAllUsers,
+
+  // select the total user count
+  selectTotal: selectUserTotal
+} = adapter.getSelectors();
 ```
 
 ### Entity Selectors
@@ -260,21 +276,12 @@ export const reducers: ActionReducerMap<State> = {
 
 export const selectUserState = createFeatureSelector<fromUser.State>('users');
 
-export const {
-  // select the array of user ids
-  selectIds: selectUserIds,
-
-  // select the dictionary of user entities
-  selectEntities: selectUserEntities,
-
-  // select the array of users
-  selectAll: selectAllUsers,
-
-  // select the total user count
-  selectTotal: selectUserTotal
-} = fromUser.adapter.getSelectors(selectUserState);
-
+export const selectUserIds = createSelector(selectUserState, fromUser.selectUserIds);
+export const selectUserEntities = createSelector(selectUserState, fromUser.selectUserEntities);
+export const selectAllUsers = createSelector(selectUserState, fromUser.selectAllUsers);
+export const selectUserTotal = createSelector(selectUserState, fromUser.selectUserTotal);
 export const selectCurrentUserId = createSelector(selectUserState, fromUser.getSelectedUserId);
+
 export const selectCurrentUser = createSelector(
   selectUserEntities,
   selectCurrentUserId,
diff --git a/docs/entity/interfaces.md b/docs/entity/interfaces.md
index ba4a3566e0..4894a08497 100644
--- a/docs/entity/interfaces.md
+++ b/docs/entity/interfaces.md
@@ -6,8 +6,8 @@ The Entity State is a predefined generic interface for a given entity collection
 
 ```ts
 interface EntityState<V> {
-  ids: string[];
-  entities: { [id: string]: V };
+  ids: string[] | number[];
+  entities: { [id: string | id: number]: V };
 }
 ```
 
diff --git a/docs/router-store/README.md b/docs/router-store/README.md
index dda7886427..18f8b26f2d 100644
--- a/docs/router-store/README.md
+++ b/docs/router-store/README.md
@@ -21,15 +21,15 @@ During the navigation, before any guards or resolvers run, the router will dispa
  * Payload of ROUTER_NAVIGATION.
  */
 export declare type RouterNavigationPayload<T> = {
-    routerState: T;
-    event: RoutesRecognized;
+  routerState: T;
+  event: RoutesRecognized;
 };
 /**
  * An action dispatched when the router navigates.
  */
 export declare type RouterNavigationAction<T = RouterStateSnapshot> = {
-    type: typeof ROUTER_NAVIGATION;
-    payload: RouterNavigationPayload<T>;
+  type: typeof ROUTER_NAVIGATION;
+  payload: RouterNavigationPayload<T>;
 };
 ```
 
@@ -43,7 +43,7 @@ export declare type RouterNavigationAction<T = RouterStateSnapshot> = {
 
 ```ts
 import { StoreRouterConnectingModule, routerReducer } from '@ngrx/router-store';
-import { App } from './app.component';
+import { AppComponent } from './app.component';
 
 @NgModule({
   imports: [
@@ -52,9 +52,9 @@ import { App } from './app.component';
     RouterModule.forRoot([
       // routes
     ]),
-    StoreRouterConnectingModule
+    StoreRouterConnectingModule.forRoot()
   ],
-  bootstrap: [App]
+  bootstrap: [AppComponent]
 })
 export class AppModule { }
 ```
diff --git a/docs/router-store/api.md b/docs/router-store/api.md
index f2a35feb77..8e5edeee5b 100644
--- a/docs/router-store/api.md
+++ b/docs/router-store/api.md
@@ -52,29 +52,34 @@ 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 { Effect, Actions, ofType } from '@ngrx/effects';
+import { map, tap } from 'rxjs/operators';
 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 }));
+  navigate$ = this.actions$.pipe(
+    ofType(RouterActions.GO),
+    map((action: RouterActions.Go) => action.payload),
+    tap(({ path, query: queryParams, extras})
+      => this.router.navigate(path, { queryParams, ...extras }))
+  )
 
   @Effect({ dispatch: false })
-  navigateBack$ = this.actions$.ofType(RouterActions.BACK)
-    .do(() => this.location.back());
+  navigateBack$ = this.actions$.pipe(
+    ofType(RouterActions.BACK),
+    tap(() => this.location.back())
+  );
 
   @Effect({ dispatch: false })
-  navigateForward$ = this.actions$.ofType(RouterActions.FORWARD)
-    .do(() => this.location.forward());
+  navigateForward$ = this.actions$.pipe(
+    ofType(RouterActions.FORWARD),
+    tap(() => this.location.forward())
+  );
 
   constructor(
     private actions$: Actions,
@@ -83,6 +88,7 @@ export class RouterEffects {
   ) {}
 }
 ```
+
 ## 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
diff --git a/docs/store-devtools/README.md b/docs/store-devtools/README.md
index da2e146625..abeb5f21f7 100644
--- a/docs/store-devtools/README.md
+++ b/docs/store-devtools/README.md
@@ -7,12 +7,10 @@ Install @ngrx/store-devtools from npm:
 
 `npm install @ngrx/store-devtools --save` OR `yarn add @ngrx/store-devtools`
 
-
 ### Nightly builds
 
 `npm install github:ngrx/store-devtools-builds` OR `yarn add github:ngrx/store-devtools-builds`
 
-
 ## Instrumentation
 ### Instrumentation with the Chrome / Firefox Extension
 
@@ -22,20 +20,23 @@ Install @ngrx/store-devtools from npm:
 
 ```ts
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { environment } from '../environments/environment'; // Angular CLI environemnt
 
 @NgModule({
   imports: [
     StoreModule.forRoot(reducers),
-    // Note that you must instrument after importing StoreModule (config is optional)
-    StoreDevtoolsModule.instrument({
-      maxAge: 25 //  Retains last 25 states
-    })
+    // Instrumentation must be imported after importing StoreModule (config is optional)
+    !environment.production ?
+      StoreDevtoolsModule.instrument({
+        maxAge: 25 // Retains last 25 states
+      })
+      : [],
   ]
 })
 export class AppModule { }
 ```
 
-### Available options
+### Instrumentation options
 When you call the instrumentation, you can give an optional configuration object:
 
 #### `maxAge`
diff --git a/docs/store/README.md b/docs/store/README.md
index 63d3b660b4..c8fdb94dfa 100644
--- a/docs/store/README.md
+++ b/docs/store/README.md
@@ -71,10 +71,10 @@ export class AppModule {}
 ```
 
 
-You can then inject the `Store` service into your components and services. Use `store.select` to _select_ slice(s) of state:
+You can then inject the `Store` service into your components and services. Use `select` operator to _select_ slice(s) of state:
 
 ```ts
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { INCREMENT, DECREMENT, RESET } from './counter';
 
@@ -96,7 +96,7 @@ export class MyAppComponent {
   counter: Observable<number>;
 
   constructor(private store: Store<AppState>) {
-    this.counter = store.select('counter');
+    this.counter = store.pipe(select('counter'));
   }
 
   increment(){
diff --git a/docs/store/actions.md b/docs/store/actions.md
index 8f6375d155..ef37f05876 100644
--- a/docs/store/actions.md
+++ b/docs/store/actions.md
@@ -25,49 +25,49 @@ Use strongly typed actions to take advantage of TypeScript's compile-time checki
 // counter.actions.ts
 import { Action } from '@ngrx/store';
 
-export const INCREMENT  = '[Counter] Increment';
-export const DECREMENT  = '[Counter] Decrement';
-export const RESET      = '[Counter] Reset';
+export enum CounterActionTypes = {
+  INCREMENT = '[Counter] Increment',
+  DECREMENT = '[Counter] Decrement',
+  RESET = '[Counter] Reset'
+}
 
 export class Increment implements Action {
-  readonly type = INCREMENT;
+  readonly type = CounterActionTypes.INCREMENT;
 }
 
 export class Decrement implements Action {
-  readonly type = DECREMENT;
+  readonly type = CounterActionTypes.DECREMENT;
 }
 
 export class Reset implements Action {
-  readonly type = RESET;
+  readonly type = CounterActionTypes.RESET;
 
   constructor(public payload: number) {}
 }
 
-export type All
+export type CounterActions
   = Increment
   | Decrement
   | Reset;
 ```
 
-This provides type actions for your reducer functions.
+This provides typed actions for your reducer functions.
 
 ```ts
 // counter.reducer.ts
-import * as CounterActions from './counter.actions';
-
-export type Action = CounterActions.All;
+import { CounterActionTypes, CounterActions } from './counter.actions';
 
-export function reducer(state: number = 0, action: Action): State {
+export function reducer(state: number = 0, action: CounterActions): State {
   switch(action.type) {
-    case CounterActions.INCREMENT: {
+    case CounterActionTypes.INCREMENT: {
       return state + 1;
     }
 
-    case CounterActions.DECREMENT: {
+    case CounterActionTypes.DECREMENT: {
       return state - 1;
     }
 
-    case CounterActions.RESET: {
+    case CounterActionTypes.RESET: {
       return action.payload; // typed to number
     }
 
@@ -78,10 +78,10 @@ export function reducer(state: number = 0, action: Action): State {
 }
 ```
 
-Instantiate actions and use `Store.dispatch()` to dispatch them:
+Instantiate actions and use `store.dispatch()` to dispatch them:
 
 ```ts
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import * as Counter from './counter.actions';
 
@@ -93,17 +93,17 @@ interface AppState {
   selector: 'my-app',
   template: `
     <button (click)="increment()">Increment</button>
-    <div>Current Count: {{ counter | async }}</div>
     <button (click)="decrement()">Decrement</button>
-
     <button (click)="reset()">Reset Counter</button>
+    
+    <div>Current Count: {{ counter | async }}</div>
   `
 })
 export class MyAppComponent {
   counter: Observable<number>;
 
   constructor(private store: Store<AppState>) {
-    this.counter = store.select('counter');
+    this.counter = store.pipe(select('counter'));
   }
 
   increment(){
diff --git a/docs/store/api.md b/docs/store/api.md
index fe7ca10e71..21c418b202 100644
--- a/docs/store/api.md
+++ b/docs/store/api.md
@@ -22,23 +22,23 @@ export class AppModule {}
 
 ### Initial State and Ahead of Time (AoT) Compilation
 
-Angular AoT requires all symbols referenced in the construction of its types (think `@NgModule`, `@Component`, `@Injectable`, etc.) to be statically defined. For this reason, we cannot dynamically inject state at runtime with AoT unless we provide `initialState` as a function. Thus the above `NgModule` definition simply changes to:
+Angular AoT requires all symbols referenced in the decorator metadata to be statically analyzable. For this reason, we cannot dynamically inject state at runtime with AoT unless we provide `initialState` as a function. Thus the above `NgModule` definition simply changes to:
 
 ```ts
-/// Pretend this is dynamically injected at runtime
+// Pretend this is dynamically injected at runtime
 const initialStateFromSomewhere = { counter: 3 };
 
-/// Static state
+// Static state
 const initialState = { counter: 2 };
 
-/// In this function dynamic state slices, if they exist, will overwrite static state at runtime.
+// In this function dynamic state slices, if they exist, will overwrite static state at runtime.
 export function getInitialState() {
-  return {...initialState, ...initialStateFromSomewhere};
+  return { ...initialState, ...initialStateFromSomewhere };
 }
 
 @NgModule({
   imports: [
-    StoreModule.forRoot(reducers, {initialState: getInitialState})
+    StoreModule.forRoot(reducers, { initialState: getInitialState })
   ]
 })
 ```
@@ -100,7 +100,7 @@ The feature state is added to the global application state once the feature is l
 
 ## Injecting Reducers
 
-To inject the root reducers into your application, use an `InjectionToken` and a `Provider` to register the reducers through dependency injection.
+To inject the root reducers into your application, use an `InjectionToken` and a `Provider` to register the reducers through dependency injection. 
 
 ```ts
 import { NgModule, InjectionToken } from '@angular/core';
diff --git a/docs/store/selectors.md b/docs/store/selectors.md
index 30c471d371..345fceb701 100644
--- a/docs/store/selectors.md
+++ b/docs/store/selectors.md
@@ -185,7 +185,7 @@ The functions returned by the `createSelector` and `createFeatureSelector` metho
 // app.component.ts
 import { Component } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 
 import * as fromRoot from './reducers';
 
@@ -199,7 +199,7 @@ class MyAppComponent {
   counter: Observable<number>;
 
   constructor(private store: Store<fromRoot.AppState>){
-    this.counter = store.select(fromRoot.selectFeatureCount);
+    this.counter = store.pipe(select(fromRoot.selectFeatureCount));
   }
 }
 ```
diff --git a/docs/store/setup.md b/docs/store/setup.md
index 57d682ccab..d6d9c55d5f 100644
--- a/docs/store/setup.md
+++ b/docs/store/setup.md
@@ -51,7 +51,7 @@ You can then inject the `Store` service into your components and services. Use `
 _select_ slice(s) of state:
 
 ```ts
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { INCREMENT, DECREMENT, RESET } from './counter';
 
@@ -73,7 +73,7 @@ class MyAppComponent {
   counter: Observable<number>;
 
   constructor(private store: Store<AppState>){
-    this.counter = store.select('counter');
+    this.counter = store.pipe(select('counter'));
   }
 
   increment(){
diff --git a/docs/store/testing.md b/docs/store/testing.md
index b921c9e22e..3e1a26c676 100644
--- a/docs/store/testing.md
+++ b/docs/store/testing.md
@@ -10,7 +10,7 @@ Use the `StoreModule.forRoot` in your `TestBed` configuration when testing compo
 my-component.ts
 ```ts
 import { Component, OnInit } from '@angular/core';
-import { Store } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 import * as fromFeature from '../reducers';
 import * as Data from '../actions/data';
 
@@ -23,7 +23,7 @@ import * as Data from '../actions/data';
   `,
 })
 export class MyComponent implements OnInit {
-  items$ = this.store.select(fromFeature.selectFeatureItems);
+  items$ = this.store.pipe(select(fromFeature.selectFeatureItems));
 
   constructor(private store: Store<fromFeature.State>) {}