demonstrated use of createSelector for composing reducer selectors. need to clean up application state interface, currently selectors are using *any* type to work around type issues

Author: patrickkee

app/app.component.ts

@@ -2,7 +2,7 @@ import { Component, ElementRef } from '@angular/core';
 import { Store, StoreModule } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { AppStore } from './interface.appstore';
-import { getItemValue, getItemValue2, getInteractiveMode } from './reducer.appstate';
+import { getItemValue, getItem2Value, getInteractiveMode } from './reducer.appstate';
 
 @Component({
     selector: 'my-app',
@@ -45,7 +45,7 @@ export class AppComponent {
   	//bind the observable appState to the local appState instance
     this._appState = this._store.select('appState');
     this._itemValue = this._store.select(getItemValue);
-    this._itemValue2 = this._store.select(getItemValue2);
+    this._itemValue2 = this._store.select(getItem2Value);
 
     this._interactiveMode = this._store.select(getInteractiveMode);
 

app/app.module.ts

@@ -6,7 +6,6 @@ import { AppComponent }  from './app.component';
 import { Child }  from './child.component';
 import { Child2 }  from './child2.component';
 import { appState }  from './reducer.appstate';
-import { loanState }  from './reducer.loan';
 
 @NgModule({
   imports:      [ 

app/child.component.ts

@@ -1,4 +1,4 @@
-import { Input, Component, ngOnChanges } from '@angular/core';
+import { Input, Component, OnChanges } from '@angular/core';
 import { AppStore } from './interface.appstore'
 
 @Component({

app/child2.component.ts

@@ -1,4 +1,4 @@
-import { Input, Component, ngOnChanges } from '@angular/core';
+import { Input, Component, OnChanges } from '@angular/core';
 import { AppStore } from './interface.appstore'
 
 @Component({

app/interface.appstore.ts

@@ -1,4 +1,6 @@
 export interface AppStore {
 	id: number;
 	item: string;
+	item2: {value: string};
+	interactiveMode: boolean;
 }

app/reducer.appstate.ts

@@ -1,10 +1,11 @@
 // The "appState" reducer performs actions on our application state
 import {Action} from '@ngrx/store';
 import {AppStore} from './interface.appstore';
+import { createSelector } from 'reselect';
 
 var defaultState = <AppStore>{id: 0,
 															item: "default",
-															item2: "default2",
+															item2: {value: "default2"},
 															interactiveMode: false}
 
 export const appState = (state: AppStore = defaultState, action: Action) => {
@@ -14,7 +15,7 @@ export const appState = (state: AppStore = defaultState, action: Action) => {
   											interactiveMode: state.interactiveMode, item2: state.item2 };
   	case 'ADD_ITEM2': 
   		return <AppStore>{id: state.id, item: state.item, 
-  											interactiveMode: state.interactiveMode, item2: action.payload.item };
+  											interactiveMode: state.interactiveMode, item2: {value: action.payload.item} };
     case 'TOGGLE_INTERACTIVE': 
   		return <AppStore>{id: state.id, item: state.item, interactiveMode: !state.interactiveMode, item2: state.item2 };
     default:
@@ -23,6 +24,9 @@ export const appState = (state: AppStore = defaultState, action: Action) => {
 };
 
 
-export const getItemValue = (state: AppStore) => state.appState.item;
-export const getItemValue2 = (state: AppStore) => state.appState.item2;
-export const getInteractiveMode = (state: AppStore) => state.appState.interactiveMode;
+export const getItemValue = (state: any) => state.appState.item;
+
+
+export const getItem2 = (state: any) => state.appState.item2;
+export const getItem2Value = createSelector(getItem2, (state: any) => state.value);
+export const getInteractiveMode = (state: any) => state.appState.interactiveMode;

systemjs.config.js

@@ -24,9 +24,10 @@
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
 
-      //@ngrx libraries
+      //@ngrx related libraries
       '@ngrx/core': 'npm:@ngrx/core/bundles/core.umd.js',
       '@ngrx/store': 'npm:@ngrx/store/bundles/store.umd.js',
+      'reselect': 'npm:reselect/dist/reselect.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',