reset again, back to simplest case

Author: Pietro Grandi

app/app.component.ts

@@ -1,15 +1,43 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {SearchBox} from "./components/search-box/search-box.component";
+import {CurrentSearch, searchReducer} from "./components/youtube-search/search.reducer";
+import {Store, provideStore} from "@ngrx/store";
+import {Observable} from "rxjs/Rx";
 
 @Component({
-
     selector: 'my-app',
-
-    template: `<h1>{{title}}</h1>`,
+    providers: [
+        provideStore({ currentSearch: searchReducer })
+    ],
+    directives: [ SearchBox ],
+    template: `
+    <h1>{{title}}</h1>
+    <div class="row">
+        <search-box [store]="store"></search-box>
+    </div>
+    <div class="row">
+        <courses-list [searchResults]="results"></courses-list>
+    </div>
+    `
 
 })
 
-export class AppComponent {
+export class AppComponent implements OnInit {
 
     title = 'One Source of Truth for Angular 2';
 
+    private currentSearch: Observable<CurrentSearch>;
+    
+    constructor(
+        private store: Store<CurrentSearch>
+    ) {
+        this.currentSearch = this.store.select<CurrentSearch>('currentSearch');
+    }
+    
+    ngOnInit() {
+        this.currentSearch.subscribe((state: CurrentSearch) => {
+            console.log(state);
+        });
+    }
+
 }

app/components/search-box/search-box.component.ts

@@ -0,0 +1,36 @@
+import {Observable} from "rxjs/Rx";
+import {ElementRef, OnInit, Component, Input} from "@angular/core";
+import {CurrentSearch} from "../youtube-search/search.reducer";
+import {Store} from "@ngrx/store";
+
+@Component({
+    inputs: ['store'],
+    selector: 'search-box',
+    template: `
+    <input type="text" class="form-control" placeholder="Search" autofocus>
+    `
+})
+
+export class SearchBox implements OnInit {
+
+    @Input()
+    store: Store<any>;
+
+    constructor(private el: ElementRef) {}
+
+    ngOnInit(): void {
+        Observable.fromEvent(this.el.nativeElement, 'keyup')
+            .map((e: any) => e.target.value)
+            .filter((text: string) => text.length > 3 || text.length == 0)
+            .debounceTime(250)
+            .subscribe((text: string) =>
+                this.store.dispatch({
+                    type: 'TEXT',
+                    payload: {
+                        text: text
+                    }
+                })
+            );
+    }
+
+}

app/components/youtube-search/search.reducer.ts

@@ -0,0 +1,15 @@
+import { ActionReducer, Action } from '@ngrx/store';
+
+export interface CurrentSearch {
+    text: string
+}
+
+export const searchReducer: ActionReducer<CurrentSearch> = (state: CurrentSearch, action: Action) => {
+    switch (action.type) {
+        case 'TEXT':
+            const update = { text: action.payload.text };
+            return Object.assign({}, state, update);
+        default:
+            return state;
+    }
+};

package.json

@@ -20,8 +20,10 @@
         "@angular/http":  "2.0.0-rc.2",
         "@angular/platform-browser":  "2.0.0-rc.2",
         "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
-        "systemjs": "0.19.27",
+        "@ngrx/core": "^1.0.0",
+        "@ngrx/store": "^2.0.0",
         "es6-shim": "^0.35.0",
+        "systemjs": "0.19.27",
         "reflect-metadata": "^0.1.3",
         "rxjs": "5.0.0-beta.6",
         "zone.js": "^0.6.12"

systemjs.config.js

@@ -1,10 +1,11 @@
 (function(global) {
     // map tells the System loader where to look for things
     var map = {
-        'app':                        'app', 
-        'rxjs':                       'node_modules/rxjs',
+        'app':                        'app',
+        '@angular':                   'node_modules/@angular',
         'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-        '@angular':                   'node_modules/@angular'
+        'rxjs':                       'node_modules/rxjs',
+        '@ngrx':                      'node_modules/@ngrx'
     };
     // packages tells the System loader how to load when no filename and/or no extension
     var packages = {
@@ -19,7 +20,9 @@
         '@angular/platform-browser',
         '@angular/platform-browser-dynamic',
         '@angular/testing',
-        '@angular/upgrade'
+        '@angular/upgrade',
+        '@ngrx/core',
+        '@ngrx/store'
     ];
     // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
     packageNames.forEach(function(pkgName) {
@@ -28,6 +31,6 @@
     var config = {
         map: map,
         packages: packages
-    }
+    };
     System.config(config);
 })(this);