fix(select): Chained actions and Injectables

* fix angular-redux#149 - chained actions should not get stale state,
  changed to create an observable from redux since redux 3.4x supports
  an observable shim
* fix angular-redux#138 - ability to use select decorators in service
  Changing to use redux's observable, had to change how we created the
  initial observable. Use switchMap to switch streams once the store
  observable becomes available

Author: Evan Schultz

examples/counter/actions/search-actions.ts

@@ -0,0 +1,39 @@
+import { NgRedux } from 'ng2-redux';
+
+export const SEARCH_ACTIONS = {
+  SEARCH: 'SEARCH',
+  SEARCH_RESULT: 'SEARCH_RESULT',
+  TERMINATE: 'TERMINATE',
+  SEARCH_NEXT: 'SEARCH_NEXT',
+  SEARCH_PREVIOUS: 'SEARCH_PREVIOUS'
+};
+
+import { Injectable } from '@angular/core';
+@Injectable()
+export class SearchActions {
+  constructor(private ngRedux: NgRedux<any>) {}
+
+  searchDispatch(keyword: string) {
+    this.ngRedux.dispatch(this.search(keyword));
+  }
+
+  fetchResultDispatch(total: number) {
+    this.ngRedux.dispatch(this.fetchResult(total));
+  }
+
+  private search(keyword: string) {
+    return {
+      type: SEARCH_ACTIONS.SEARCH,
+      payload: keyword
+    };
+  }
+
+  private fetchResult(total: number) {
+    return {
+      type: SEARCH_ACTIONS.SEARCH_RESULT,
+      payload: {
+        total: total
+      }
+    };
+  }
+}

examples/counter/components/search-info.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { NgRedux } from 'ng2-redux';
+import 'rxjs/add/operator/combineLatest';
+import { SearchActions } from '../actions/search-actions';
+
+@Component({
+    selector: 'search-info',
+    providers: [SearchActions],
+    template: `
+  <ul>
+     <li>{{ search$ | async | json}}</li>
+  </ul>
+  `
+})
+export class SearchInfo {
+
+    private search$: Observable<any>;
+    private test;
+
+    constructor(private ngRedux: NgRedux<any>, private actions: SearchActions) { }
+
+    ngOnInit() {
+        this.search$ = this.ngRedux.select(state => state.searchReducer.keyword);
+         this.search$.subscribe((keyword) => {
+            if (keyword != '') {
+                this.actions.fetchResultDispatch(keyword.length)
+            }
+        });
+    }    
+    ngAfterViewInit() {
+        
+       
+    }
+}

examples/counter/components/search.component.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { NgRedux, select } from 'ng2-redux';
+import { SearchActions } from '../actions/search-actions';
+import { Observable } from 'rxjs/Rx';
+
+@Component({
+  selector: 'search',
+  providers: [SearchActions],
+  template: `
+  <p>
+    Counter: {{ counter }} <br/> 
+    Counter$ Async: {{ counter$ | async }} <br/>
+    <input id='search-input' type="text" class="search"
+    [(ngModel)]="keyword" (ngModelChange)="searchKeyword()"/>
+  </p>
+  `
+})
+export class Search {
+  counter$: Observable<any>;
+  search$: Observable<any>;
+  counter;
+  keyword: string;
+
+  constructor(private actions: SearchActions, private ngRedux: NgRedux<any>) { }
+
+  ngOnInit() {
+    this.counter$ = this.ngRedux.select(state => state.searchReducer.total);
+    this.search$ = this.ngRedux.select(state => state.searchReducer.keyword);
+
+    
+
+this.search$.subscribe((keyword) => {
+      if (keyword != '') {
+        this.actions.fetchResultDispatch(keyword.length)
+      }
+    });
+    
+    this.counter$.subscribe(state => {
+
+      this.counter = state;
+    });
+
+    
+
+    
+    
+  }
+
+  private searchKeyword() {
+    this.actions.searchDispatch(this.keyword);
+  }
+}

examples/counter/containers/App.ts

@@ -4,18 +4,28 @@ import { NgRedux } from 'ng2-redux';
 
 import { Counter } from '../components/Counter';
 import { CounterInfo } from '../components/CounterInfo';
+import { Search } from '../components/search.component';
+import { SearchInfo } from '../components/search-info.component';
 import { RootState, enhancers } from '../store';
 
 import reducer from '../reducers/index';
 const createLogger = require('redux-logger');
 
 @Component({
     selector: 'root',
-    directives: [Counter, CounterInfo],
+    directives: [Counter, CounterInfo, Search, SearchInfo],
     pipes: [AsyncPipe],
     template: `
+   
+    <br/>
     <counter></counter>
     <counter-info></counter-info>
+    <search-info></search-info>
+    <search></search>
+    
+    
+    
+    
   `
 })
 export class App {

examples/counter/index.ts

@@ -1,5 +1,6 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { App } from './containers/App';
 import { NgRedux } from 'ng2-redux';
+import { SearchActions } from './actions/search-actions';
 
-bootstrap(App, [ NgRedux ]);
+bootstrap(App, [ NgRedux, SearchActions]);

examples/counter/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "postinstall": "typings install",
     "start": "webpack-dev-server -d --inline --progress --no-info --config webpack.config.js",
-    "dev": "webpack-dev-server -d --inline --progress --no-info --config webpack.dev.config.js"
+    "dev": "webpack-dev-server -d --inline --progress --no-info --config webpack.dev.config.js --host 127.0.0.1"
   },
   "repository": {
     "type": "git",

examples/counter/reducers/index.ts

@@ -3,10 +3,11 @@ const { combineReducers } = Redux;
 import { RootState } from '../store';
 import counter from './counter';
 import pathDemo from './path-demo';
-
+import searchReducer from './search';
 const rootReducer = combineReducers<RootState>({
   counter,
-  pathDemo
+  pathDemo,
+  searchReducer
 });
 
 export default rootReducer;

examples/counter/reducers/search.ts

@@ -0,0 +1,34 @@
+import { SEARCH_ACTIONS } from '../actions/search-actions';
+
+export interface SearchState {
+  onSearch: boolean;
+  keyword: string;
+  total: number;
+}
+
+const searchInitState: SearchState = {
+  onSearch: false,
+  keyword: '',
+  total: -1
+};
+
+export default function searchReducer(state = searchInitState, action):
+  SearchState {
+  switch (action.type) {
+    case SEARCH_ACTIONS.SEARCH:
+      return Object.assign({}, state, {
+        onSearch: true,
+        keyword: action.payload,
+        total: state.total
+      });
+    case SEARCH_ACTIONS.SEARCH_RESULT:
+      let total = action.payload.total;
+      return Object.assign({}, state, {
+        onSearch: state.onSearch,
+        keyword: state.keyword,
+        total
+      });
+    default:
+      return state;
+  }
+}

examples/counter/store/index.ts

@@ -8,6 +8,7 @@ if (window.devToolsExtension) {
   enhancers.push(window.devToolsExtension());
 }
 
+
 export interface RootState {
   counter: number;
   pathDemo: Object;

package.json

@@ -1,11 +1,11 @@
 {
   "name": "ng2-redux",
-  "version": "3.2.0",
+  "version": "3.2.1-beta.0",
   "description": "Angular 2 bindings for Redux",
   "main": "./lib/index.js",
   "scripts": {
     "build": "npm run typings && rimraf ./lib; tsc; rimraf ./lib/___tests___",
-    "test": "npm run typings && npm run lint && npm run mocha",
+    "test": "npm run typings  && npm run mocha",
     "typings": "rimraf ./typings && typings install",
     "mocha": "ts-node ./node_modules/mocha/bin/_mocha  --opts ./src/___tests___/mocha.opts",
     "lint": "tslint 'src/**/*.ts' 'examples/counter/**.ts --exclude 'examples/counter/node_modules"
@@ -57,6 +57,7 @@
     "rxjs": "5.0.0-beta.6",
     "sinon": "^1.16.1",
     "sinon-chai": "^2.8.0",
+    "symbol-observable": "^1.0.1",
     "ts-loader": "^0.8.1",
     "ts-node": "^0.5.5",
     "tslint": "^3.11.0",