Eğik 2 Ngrx Store, Etkileri ve "Geçici Devletleri"

Question

bir form bileşeni kapsamında Çalışma: Ben kullanıcı "bekleyen, başarı, hata, bozulmamış" formun durumlarını göstermeye çalışıyorum

. Bu devletleri mağazada "geçici devletler" olarak görmek istemiyorum.

Bir Etkisi vardır:

@Effect() 
    addTagToVideoEffect_ = this.appState_ 
    .ofType(TagActions.ADD_TAG_TO_VIDEO) 
    .map<AddTagToVideo>(action => action.payload) 
    .switchMap((addTag: AddTagToVideo) => this.dtsiVideosService.addTagToVideo(addTag) 
     .map((addTag: AddTagToVideo) => TagReducers.addTagToVideoComplete(addTag)) 
     .catch((err) =>Observable.throw(err)) 
    ); 

ve benim form bileşeninde ben TagActions.ADD_TAG_TO_VIDEO sevk ediyorum ve buna abone:

onTag(tag: TagEntity) { 

    this.subscription = this.tagActions.addTagToVideoEffect_.subscribe(
     this.onAddTagSuccess, 
     this.onAddTagError 
    ); 

    this.tagActions.addTagToVideo({videoId: this.videoId, tag: tag}); 
} 

.tagActions.addTagToVideoEffect_.subscribe sonuçlarını iki kez denilen benim etkiye sahip olmanın. Bütün bu geçici devletler için mağazadan geçmeksizin sonuçların etkilerini nasıl görebiliriz? Ve iki kez çağrılan etkiyi sahip değilsiniz ...

Answer 1

Etki çağrısını iki kez almanızın nedeni sadece bir Gözlemlenebilir olmasıdır. Bir Yayıncıya dönüştürmeniz gerekiyor.

@Effect() 
    addTagToVideoEffect_ = this.appState_ 
    .ofType(TagActions.ADD_TAG_TO_VIDEO) 
    .map<AddTagToVideo>(action => action.payload) 
    .switchMap((addTag: AddTagToVideo) => this.dtsiVideosService.addTagToVideo(addTag) 
     .map((addTag: AddTagToVideo) => TagReducers.addTagToVideoComplete(addTag)) 
     .catch((err) => Observable.throw(err)))) 
    .share(); 

Sonra görünümünde onunla çalışabilirsiniz:

tagFormState_: BehaviorSubject<FormState> = new BehaviorSubject<FormState>({}); 


    onTag(tag: TagEntity) { 

    Observable.from(this.tagActions2.addTagToVideoEffect_) 
    .first() 
    .toPromise() 
    .then(this.onAddTagSuccess, this.onAddTagError) 

    this.tagFormState_.next({pending: true}); 
    this.tagActions.addTagToVideo({videoId: this.videoId, tag: tag}); 
    } 


    onAddTagSuccess = (payload) => { 
    this.tagFormState_.next({success: 'Success !'}); 
    this.resetTagFormState(); 
    } 

    onAddTagError = (err) => { 
    this.tagFormState_.next({error: err.message}); 
    this.resetTagFormState(); 
    } 

    resetTagFormState() { 
    setTimeout(_=> { 
     this.tagFormState_.next({}); 
    }, 1000); 
    } 

Kaynakları yardımcı konuda bana bu sıralamak:

• https://github.com/ReactiveX/RxJS/issues/1135
• https://github.com/ReactiveX/rxjs/issues/1420
• https://egghead.io/courses/rxjs-subjects-and-multicasting-operators