URL parametresiyle sayfa yüklemeden önce ngrx eylemi bekleniyor

Question

ngrx kullanarak bir ng2 uygulaması yapıyorum. Uygulama başlatıldığında, ilk veriyi almak için bir web servisi çağrılır, bu veriler alındığında bir INIT_DONE eylemi oluşturur. Ben sayfa/mypage gittiğinizde

export interface State { 
    documents: Document[]; 
    selectedDocument: Document 
} 

/456 Url'de parametresini olan 456, ben URL parametresi gibi olsun böylece getirilen bazı verilerin almak gerekir:

My Devlet şöyle Bu:

ngOnInit() { 
    this.paramSubscription = this.route.params 
    .select<string>('id') 
    .map((id) => new SelectAction(id)) 
    .subscribe(this.store); 
} 

SELECT_ACTION getirilen verilerdeki elemanı bulur ve selectedDocument ayarlar. Sorun, SELECT_ACTION'un INIT_DONE'dan önce oluşturulduğu ve bu noktada documents boş olduğudur.

Sayfam yüklenmeden önce INIT_DONE için nasıl bekleyebilirim?

Answer 1

. Ayrıca, filtre kullanarak bu belgelerin ayarlandığını (burada bir dizi olduğunu varsayarak) iki kez kontrol edeyim. Bileşen tahrip edildiğinde abonelikten çıkabilirsiniz, böylece

ngOnInit() { 
    this.subscription = Observable.combineLatest(
     this.store.select("documents") 
      .filter(documents => documents.length > 0), 
     this.paramSubscription = this.route.params 
      .select<string>('id') 
) 
    .map((combinedData: [Object[], string]) => combinedData[1]) 
    .subscribe(this.store); 
} 

Ayrıca bir değişkene abonelik atayın. Aksi halde bileşen tahrip edildikten sonra abonelik civarında olacak ve bu sizin eylem hala yayılan alır mümkündür: Bir çözümleyicinizi ihtiyaç

ngOnDestroy() { 
    this.subscription.unsubscribe(); 
} 

Answer 2

Sen mağazadan belgeleri seçip ona abone ve oradan eyleminizi yayarlar olabilir: birden çok kaynak akışlarının son değerlerini birleştiren gibi combineLatest operatörü kullanmaktan yapacak

ngOnInit() { 
    this.store.select("documents").subscribe(documents => { 
    this.paramSubscription = this.route.params 
     .select<string>('id') 
     .map((id) => new SelectAction(id)) 
     .subscribe(this.store); 
    }); 
} 

Answer 3

. Bir çözümleyici, gezinme eylemini tamamlamadan önce veriler mevcut olana kadar bekler. Rota yapılandırması üzerinde

@Injectable() 
export class DocumentsResolver implements Resolve { 

    constructor(
     private store: Store 
    ) {} 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero> { 
     // take id from snapshot 
     const id = route.params['id']; 
     // start with the document list 
     return this.store.select('documents') 
      // wait until there is data available 
      .filter(documents => documents && documents.length > 0) 
      // then produce the selected document 
      .mergeMapTo(this.store.select('selectedDocument')); 
    } 
} 

: _document_ vs _documents_: yönlendirici kararlılığının here