NgrxStore और कोणीय - एसिंक पाइप का बड़े पैमाने पर उपयोग करें या कन्स्ट्रक्टर

Question

में केवल एक बार सब्सक्राइब करें मैं ngrx स्टोर को देखना शुरू कर रहा हूं और मुझे कोणीय एसिंक पाइप का उपयोग करने की सुविधा दिखाई देती है। साथ ही मुझे यकीन नहीं है कि कोणीय एसिंक पाइप का व्यापक रूप से उपयोग करना अच्छा विकल्प है या नहीं।

मैं एक साधारण उदाहरण बना देता हूं। आइए मान लें कि उसी टेम्पलेट में मुझे किसी ऑब्जेक्ट (उदा। एक व्यक्ति) के विभिन्न विशेषताओं को दिखाने की आवश्यकता है जिसे स्टोर से पुनर्प्राप्त किया जाता है। जबकि घटक वर्ग निर्माता

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

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

होता

टेम्पलेट कोड का एक टुकड़ा

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

हो सकता है जहां तक ​​मैं समझता हूँ कि इस कोड को 3 सदस्यता (async के माध्यम से टेम्पलेट में किए गए तात्पर्य पाइप) एक ही पर्यवेक्षक (person$) के लिए।

एक वैकल्पिक MyComponent में है कि संपत्ति भरता 1 संपत्ति (person) को परिभाषित करने और केवल 1 सदस्यता (निर्माता में) के लिए, इस तरह के रूप

export class MyComponent { 
    person: Person; 

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

जबकि टेम्पलेट मानक संपत्ति बाध्यकारी (का उपयोग करता होगा async पाइप के बिना यानी), जैसे

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

अब प्रश्न

क्या 2 दृष्टिकोणों के बीच प्रदर्शन के मामले में कोई अंतर है? कोड की दक्षता को प्रभावित करने के लिए एसिंक पाइप (यानी सब्सक्रिप्शन का भारी उपयोग) का भारी उपयोग है?

धन्यवाद किसी भी मार्गदर्शन के लिए अग्रिम

Answer 1

है न तो, आप अपने आवेदन के रूप में स्मार्ट और प्रस्तुति घटकों रचना चाहिए।

लाभ:

• स्मार्ट नियंत्रक पर सभी buissness तर्क।
• बस एक सदस्यता के
• Reusability
• प्रस्तुति नियंत्रक केवल एक जिम्मेदारी है, केवल डेटा पेश करने के लिए है और जहां से आती भी नहीं जानते हैं। (शिथिल युग्मित)

आखिरी सवाल का जवाब:,

async पाइप के बड़े पैमाने पर उपयोग दक्षता को प्रभावित करेगा, क्योंकि यह हर async पाइप की सदस्यता होगा। यदि आप http सेवा को कॉल कर रहे हैं, तो आप इसे और अधिक देख सकते हैं, क्योंकि यह प्रत्येक async पाइप के लिए http अनुरोध को कॉल करेगा।

स्मार्ट घटक

@Component({ 
    selector: 'app-my', 
    template: ` 
     <app-person [person]="person$ | async"></app-person> 
`, 
    styleUrls: ['./my.component.css'] 
}) 
export class MyComponent implements OnInit { 

    person$: Observable<Person>; 

    constructor(private store: Store<ApplicationState>) {} 

    ngOnInit() { 
     this.person$ = this.store.select(stateToCurrentPersonSelector); 
    } 

} 

प्रस्तुति घटक

@Component({ 
    selector: 'app-person', 
    template: ` 
    <div>{{person.name}}</div> 
    <div>{{person.address}}</div> 
    <div>{{(person.age}}</div> 
`, 
    styleUrls: ['./my.component.css'] 
}) 
export class PersonComponent implements OnInit { 

    @Input() person: Person; 

    constructor() {} 

    ngOnInit() { 
    } 

} 

अधिक जानकारी की जांच के लिए:

• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.u27zmzf25
• http://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/

Answer 2

आप किसी भी अवलोकन घोषणाओं के अंत में ".share()" जोड़ सकते हैं।

this.name$ = Observable.create(observer => { 
    console.log("Subscriber!", observer); 
    return observer.next("john") 
}).delay(2000).share(); 

this.httpget$ = http.get("https://api.github.com/").share(); 

Plunkr प्रदर्शन: एक नमूदार पर अपने async पाइप के सभी तो एक ही सदस्यता साझा करेंगे https://embed.plnkr.co/HNuq1jUh3vyfR2IuIe4X/

Answer 3

एक और संभावना इस तरह निर्माण का उपयोग करने के लिए है:

<div *ngIf="person$ | async as per"> 
    <div>{{ per.name }}</div> 
    <div>{{ per.address }}</div> 
    <div>{{ per.age }}</div> 
<div> 

पुन: प्रयोज्य के लिए हालांकि प्रस्तुति घटक विधि का उपयोग करने के लिए कोड की बिट्स इसके संभावित रूप से बेहतर है।

कृपया ध्यान दें कि यह कोणीय 5 में काम करता है, अन्य संस्करणों के बारे में सुनिश्चित नहीं है।