title: Angular2 NGRX/Store View Not Updating
body: <p>Sorry for yet another Angular 2 view update question but I haven't been able to find an answer in any other responses. I'm mentioning the use of NGRX/Store here though I doubt its the reason the view isn't updating.Oddly enough it seems to update once (at least) but manages to stay a step behind. The last (most recent) update never takes affect. When the model updates, the previous state updates in the view. It's mind boggling really. Heres the appropriate code.</p>
  
  <p><strong>Relevant Installed packages</strong></p>
  
  <pre><code>    "@angular/common": "2.0.0-rc.5",
      "@angular/compiler": "2.0.0-rc.5",
      "@angular/core": "2.0.0-rc.5",
      "@angular/forms": "^0.3.0",
      "@angular/http": "2.0.0-rc.5",
      "@angular/platform-browser": "2.0.0-rc.5",
      "@angular/platform-browser-dynamic": "2.0.0-rc.5",
      "@angular/router": "^3.0.0-rc.1",
      "@angular/upgrade": "2.0.0-rc.5",
      "@ngrx/core": "^1.0.1",
      "@ngrx/store": "^2.0.1",
  </code></pre>
  
  <p><strong>My main app module</strong></p>
  
  <pre><code>@NgModule({
      imports: [
          BrowserModule,
          FormsModule,
          RouterModule.forRoot(AppRoutes)
      ],
      declarations: [
          ConsumerApp,
          AppManagement,
          MyApps,
          AppRegistration,
          AppDetails,
      ],
      providers: [
          HTTP_PROVIDERS,
          STORE_PROVIDERS,
          AppManagementService,
      ],
      bootstrap: [
          ConsumerApp
      ]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>My-Apps Component</strong></p>
  
  <pre><code>@Component({
      selector: 'my-apps',
      template: require('./templates/my-apps.html')
  })
  export class MyApps implements OnInit, OnDestroy {
  
      apps = {};
      change = 1;
      userAppsSubscription;
  
      constructor (
          private appsService: AppManagementService,
          private store: Store&lt;any&gt; ) {}
  
      ngOnInit () {
  
          this.userAppsSubscription = this.store
              .select('userApps')
              .subscribe( userApps =&gt; {
                  this.apps = Object.assign(this.apps, userApps);
                  this.change++;
                  console.log(this);
              })
  
          this.appsService.getUserApps();
      }
  
      ngOnDestroy () {
  
          this.userAppsSubscription.unsubscribe();
      }
  }
  </code></pre>
  
  <p><strong>My-Apps template</strong></p>
  
  <pre><code>&lt;div id="my-apps"&gt;
      &lt;h1&gt;My Apps&lt;/h1&gt;
      &lt;h2&gt;{{change}}&lt;/h2&gt;
      &lt;p&gt;You currently don't have any registered applications. Click "Register an App" to get started.&lt;/p&gt;
  
      &lt;p [hidden]="!loading"&gt;{{apps | json}}&lt;/p&gt;
  
      &lt;div class="apps-container"&gt;  
          &lt;div class="col-md-4 col-sm-6" *ngFor="let app of apps.available"&gt;
              &lt;button class="block-button"&gt;
                  &lt;h3&gt;{{app.name}}&lt;/h3&gt;
                  &lt;p&gt;&lt;strong&gt;Description:&lt;/strong&gt; {{app.description}}&lt;/p&gt;  
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>App Management Service</strong></p>
  
  <pre><code>@Injectable()
  export class AppManagementService {
  
      constructor (
          private http: Http, 
          private store: Store&lt;any&gt;) {}
  
      getUserApps () {
  
          this.store
              .dispatch({
                  type: RETRIEVE_USER_APPS,
                  payload: null
              })
  
          return this.http
              .get(ALL_APPS)
              .toPromise()
              .then(response =&gt; {
                  this.store
                      .dispatch({
                          type: RECIEVE_USER_APPS,
                          payload: response.json()
                      })
              })
              .catch(response =&gt; {
                  this.store
                      .dispatch({
                          type: RETRIEVAL_FAILURE_USER_APPS,
                          payload: null
                      })
              });
      }
  }
  </code></pre>
  
  <p><strong>When the "My Apps" page is first hit this is what end up being printed out.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/7XwAo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7XwAo.png" alt="enter image description here"></a></p>
  
  <p><strong>And this is where the view end up.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/vbFCs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vbFCs.png" alt="enter image description here"></a></p>
  
  <p>Odd right? you can see the page was updated with the second state broadcasted from the NGRX/Store but not the final state Which contains the real bread and butter (the list of 6 apps). Why on earth would the view not update properly?</p>