Angular2 NGRX/Store-Ansicht wird nicht aktualisiert

Question

Entschuldigung für eine weitere Update-Frage zu Angular 2 View, aber ich konnte in keiner anderen Antwort eine Antwort finden. Ich erwähne hier die Verwendung von NGRX/Store, obwohl ich bezweifle, dass dies der Grund dafür ist, dass die Ansicht nicht aktualisiert wird. Zufällig scheint es zumindest einmal zu aktualisieren, schafft es aber, einen Schritt zurück zu bleiben. Das letzte (neueste) Update wird nie wirksam. Wenn das Modell aktualisiert wird, wird der vorherige Status in der Ansicht aktualisiert. Es ist wirklich verrückt. Hier ist der entsprechende Code.

Relevante Installierte Pakete

"@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", 

Mein Haupt App Modul

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     RouterModule.forRoot(AppRoutes) 
    ], 
    declarations: [ 
     ConsumerApp, 
     AppManagement, 
     MyApps, 
     AppRegistration, 
     AppDetails, 
    ], 
    providers: [ 
     HTTP_PROVIDERS, 
     STORE_PROVIDERS, 
     AppManagementService, 
    ], 
    bootstrap: [ 
     ConsumerApp 
    ] 
}) 
export class AppModule { } 

My-Apps Komponente

@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<any>) {} 

    ngOnInit() { 

     this.userAppsSubscription = this.store 
      .select('userApps') 
      .subscribe(userApps => { 
       this.apps = Object.assign(this.apps, userApps); 
       this.change++; 
       console.log(this); 
      }) 

     this.appsService.getUserApps(); 
    } 

    ngOnDestroy() { 

     this.userAppsSubscription.unsubscribe(); 
    } 
} 

My-Apps Vorlage

<div id="my-apps"> 
    <h1>My Apps</h1> 
    <h2>{{change}}</h2> 
    <p>You currently don't have any registered applications. Click "Register an App" to get started.</p> 

    <p [hidden]="!loading">{{apps | json}}</p> 

    <div class="apps-container"> 
     <div class="col-md-4 col-sm-6" *ngFor="let app of apps.available"> 
      <button class="block-button"> 
       <h3>{{app.name}}</h3> 
       <p><strong>Description:</strong> {{app.description}}</p> 
      </button> 
     </div> 
    </div> 

</div> 

App Management Service

@Injectable() 
export class AppManagementService { 

    constructor (
     private http: Http, 
     private store: Store<any>) {} 

    getUserApps() { 

     this.store 
      .dispatch({ 
       type: RETRIEVE_USER_APPS, 
       payload: null 
      }) 

     return this.http 
      .get(ALL_APPS) 
      .toPromise() 
      .then(response => { 
       this.store 
        .dispatch({ 
         type: RECIEVE_USER_APPS, 
         payload: response.json() 
        }) 
      }) 
      .catch(response => { 
       this.store 
        .dispatch({ 
         type: RETRIEVAL_FAILURE_USER_APPS, 
         payload: null 
        }) 
      }); 
    } 
} 

Wenn die "Meine Apps" Seite wird zuerst getroffen das ist, was am Ende wird ausgedruckt.

Und das ist, wo der Blick nach oben beenden.

Odd richtig? Sie können sehen, dass die Seite mit dem zweiten Status aktualisiert wurde, der vom NGRX/Store gesendet wurde, aber nicht dem Endzustand, der das echte Brot und Butter enthält (die Liste mit 6 Apps). Warum in aller Welt würde die Ansicht nicht korrekt aktualisiert?

Answer 1

Können Sie Ihren Reduzierer posten?

Ich würde dies umgestalten, um den Stream in der Init-Methode nicht auszupacken. Verwenden Sie die asynchrone Pipe, um dies für Sie zu tun. Dies regelt auch das Abmelden.

Etwas wie:

HTML

<div id="my-apps"> 
    <h1>My Apps</h1> 
    <h2>{{change}}</h2> 
    <p>You currently don't have any registered applications. Click "Register an App" to get started.</p> 

    <p [hidden]="!loading">{{apps | json}}</p> 

    <div class="apps-container"> 
     <div class="col-md-4 col-sm-6" *ngFor="let app of ($userAppsSubscription | async).apps.available"> 
      <button class="block-button"> 
       <h3>{{app.name}}</h3> 
       <p><strong>Description:</strong> {{app.description}}</p> 
      </button> 
     </div> 
    </div> 
</div> 

TS

@Component({ 
    selector: 'my-apps', 
    template: require('./templates/my-apps.html') 
}) 
export class MyApps implements OnInit, OnDestroy { 

    apps = {}; 
    change = 1; 
    $userAppsSubscription:Observable<string>; 

    constructor (
     private appsService: AppManagementService, 
     private store: Store<any>) {} 

    ngOnInit() { 

     this.userAppsSubscription = this.store 
      .select('userApps'); 

     this.appsService.getUserApps(); 
    } 

    ngOnDestroy() { 

     this.userAppsSubscription.unsubscribe(); 
    } 
}