Angular 2 NGRX/store best practice

Question

In meinem Winkel 2 Anwendungen starten i ganze Projekt Refactoring Muster NGRX, aber ich habe noch ein paar Fragen im Sinn haben:

Was meine Anwendung kann das Abrufen ich eine Liste von Anwendungen und eine Liste der Kategorien der Anwendungen

1- Kann ich den Zustand wie "selectedCategory" verwalten (nur eine kann so gewählt werden, dass es ein primitives ist), die alte Art in diesem Fall? :

Categories.component.ts

... 
... 
OnCategorySelect (applicationID : string) { 
this.selectedCategory = applicationID 
} 

Oder sollte ich ein selectedCategory Minderer für das schaffen?

2 - wenn die Daten von der Chipkomponente Passing (applicationsListComponent) zu stummen eine (categoryComponent) i tun es auf diese Weise mit async Rohr:

**ApplicationsListComponent.ts** 

.... 
.... 
<app-category [categories]='appCategories | async'></app-category> 

In diesem Fall sollte ich changeDetection: ChangeDetectionStrategy.OnPush in der stummen Komponente?

3- In meinem stummen Komponente (categoryComponent), wenn ich die categories von der Smart-Komponente empfangen whith @Input i'am nicht als beobachtbare aber iam tun dies erklärt:

category.component.ts

@Input() appCategories: CategoryInfo[]; 

category.component.html

<div *ngFor='let app of appCategories'>....</div> 

In diesem Fall weiß ich nicht, ob ich die von @Input empfangenen Daten von der Smart-Komponente als Observable deklarieren muss.

Irgendwelche Vorschläge?

Answer 1

1- Für solche Fälle habe ich einen separaten Reduzierer "selectedCategory" erstellt. Seine Implementierung ist ziemlich trivial

import { ActionReducer, Action } from '@ngrx/store'; 
    import { SELECT_CATEGORY } from '../actions'; 

    export const selectedCategory: ActionReducer<ICategory> = (state: ICategory, {type, payload}: Action) => { 
     switch (type) { 
      case SELECT_CATEGORY: 
       return payload; 

      default: 
       return state; 
     } 
    }; 

2- Ja. Store in ngrx ist unveränderbar. Es bedeutet, dass Angular bei der Überwachung keinen Sinn hat, wenn sich die Eigenschaft eines Objekts geändert hat. Die einzige Möglichkeit, Eingabedaten zu ändern, besteht darin, das gesamte Objekt @Input zu ändern. Also changeDetection: ChangeDetectionStrategy.OnPush ist in Ordnung.

3- No. @Input Eigenschaften sollten nicht Observables sein. Binden sie durch async Rohr (wie in Ihrem Beispiel) ist genug. Wenn Sie Observable direkt an Komponenten übergeben (ohne async), funktioniert die Erkennung von Winkeländerungen nicht wie erwartet. Referenz auf Observable Objekt bleibt die ganze Zeit gleich, auch wenn sich die tatsächlichen Daten ändern. In diesem Fall, wenn Sie auf Datenänderungen reagieren möchten, müssen Sie die Observable manuell abonnieren und abmelden.

Answer 2

Um mehr über @ user1614543 ‚s Antwort

hinzufügen, wenn Sie die Änderung erkennen wollen auf @Input, die von einer beobachtbaren Quelle ist.

Verwenden Sie den folgenden Code in Ihrer dummen Komponente.

ngOnChanges(changes: SimpleChanges) { 
    if (changes.hasOwnProperty('appCategories')) { 
    ... 
    } 
}