2017-01-17 15 views
20

ngrx Store'a bakmaya başladım ve Açısal asenkron borusunu kullanma kolaylığını görüyorum. Aynı zamanda Açısal uyumsuz boruyu kitlesel olarak kullanmanın iyi bir seçim olup olmadığından emin değilim.NgrxStore ve Açısal - Sıkıştırma borusunu kitlesel olarak kullanın ya da kurucuda sadece bir kez abone olun

Basit bir örnek oluşturuyorum. Aynı şablonda, Store'dan alınan bir nesnenin farklı özelliklerini (örneğin bir Kişi) göstermem gerektiğini varsayalım. Bileşen sınıf yapıcı

export class MyComponent { 
    person$: Observable<Person>; 

    constructor(
    private store: Store<ApplicationState> 
) { 
     this.person$ = this.store.select(stateToCurrentPersonSelector); 
    } 
..... 
..... 
} 

olurdu iken

şablon kod parçasıdır Bildiğim kadarıyla anladığım kadarıyla bu kod zaman uyumsuz aracılığı şablonda yapılan 3 abonelikleri (ima

<div>{{(person$ | async).name}}</div> 
<div>{{(person$ | async).address}}</div> 
<div>{{(person$ | async).age}}</div> 

olabilir Aynı Gözlemlenebilir boru (person$).

alternatif bir şablon bağlayıcı standart özelliği (kullanır iken gibi

export class MyComponent { 
    person: Person; 

    constructor(
    private store: Store<ApplicationState> 
) { 
     this.store.select(stateToCurrentPersonSelector) 
       .subscribe(person => this.person = person); 
    } 
..... 
..... 
} 

, özelliği doldurur MyComponent 1 özelliğini (person) tanımlamak için ve (yapıcısında) Sadece 1 abonelik sahip olacak Zaman uyumsuz borusuz bir deyişle), daha çok soru

GEÇ
<div>{{person.name}}</div> 
<div>{{person.address}}</div> 
<div>{{(person.age}}</div> 

olarak 210

2 yaklaşım arasındaki performans açısından bir fark var mıdır? Kodun verimliliğini etkileyecek async borusunun muazzam kullanımı (yani büyük bir abonelik kullanımı) var mıdır?

teşekkür başvurunuzun kadar akıllı ve sunum bileşenlerini oluşturmak gerekir ve herhangi rehberlik için avans

+2

'Dumb' bileşenleri için girişlerdeki async borusunu kapsayıcılarda kullanmayı düşünebilirsiniz. Bileşenleri ve kapsayıcıları ['example-app'] 'a (https://github.com/ngrx/example-app/tree/master/src/app) ve ayrıca [* Presentational ve Container Components *]' a bakın (https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0). – cartant

cevap

İlgili konular