title: ngrx store 4 select not working
body: <p>I was struggling the whole day to get my Angular app working with ngrx/store 4. After lots of unsuccessful hours, I decided to create a new absolute minimal app to check if I have maybe another problem. But the minimal app is not working at all :(</p>
  
  <p>In the Chrome Redux devtools I can see, that the store is updated properly. But the UI is not updated. Also the log statement in the app.component.ts (<code>this.age$.subscribe(console.log)</code>) is never executed. I really have no clue what I am missing.</p>
  
  <p>Here is the relevant code.</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "dependencies": {
      "@angular/animations": "^4.2.4",
      "@angular/common": "^4.2.4",
      "@angular/compiler": "^4.2.4",
      "@angular/core": "^4.2.4",
      "@angular/forms": "^4.2.4",
      "@angular/http": "^4.2.4",
      "@angular/platform-browser": "^4.2.4",
      "@angular/platform-browser-dynamic": "^4.2.4",
      "@angular/router": "^4.2.4",
      "@ngrx/store": "^4.0.2",
      "@ngrx/store-devtools": "^4.0.0",
      "rxjs": "^5.4.2",
      "zone.js": "^0.8.14"
    },
    "devDependencies": {
      "@types/node": "^8.0.22",
      "typescript": "^2.4.2"
    }
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { AppState } from './state';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { StoreModule } from '@ngrx/store';
  import { StoreDevtoolsModule } from '@ngrx/store-devtools'
  import { reducer } from './reducer';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      StoreModule.forRoot({ reducer }),
      StoreDevtoolsModule.instrument(),
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>state.ts</strong></p>
  
  <pre><code>export interface AppState {
    age: number
  }
  
  export const INITIAL_STATE: AppState = {
    age: 1
  }
  </code></pre>
  
  <p><strong>actions.ts</strong></p>
  
  <pre><code>import { Action } from '@ngrx/store';
  
  export const ACTION_TYPE = 'CHANGE_AGE_ACTION';
  
  export class ChangeAgeAction implements Action {
    readonly type: string = ACTION_TYPE;
  
    constructor(public payload?: number) {
    }
  }
  </code></pre>
  
  <p><strong>reducer.ts</strong></p>
  
  <pre><code>import { ChangeAgeAction } from './actions';
  import { Action } from '@ngrx/store';
  import { AppState, INITIAL_STATE } from './state';
  import { ACTION_TYPE } from './actions';
  
  function changeName(state: AppState, action: ChangeAgeAction): AppState {
    return {
      age: action.payload
    }
  }
  
  export function reducer(state: AppState = INITIAL_STATE, action: Action) {
    switch (action.type) {
      case ACTION_TYPE:
        return changeName(state, action);
  
      default:
        return state;
    }
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { ChangeAgeAction } from './actions';
  import { AppState } from './state';
  import { Component } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import { Store } from '@ngrx/store';
  import { map } from 'rxjs/operator/map';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    age$: Observable&lt;number&gt;;
  
    constructor(private store: Store&lt;AppState&gt;) {
      this.age$ = this.store.select&lt;number&gt;(state =&gt; state.age);
      this.age$.subscribe(console.log);
    }
  
    changeAge() {
      this.store.dispatch(new ChangeAgeAction(Math.random()));
    }
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;h3&gt;Age: {{ age$ | async }}&lt;/h3&gt;
  &lt;button (click)="changeAge()"&gt;Change Age&lt;/button&gt;
  </code></pre>