简体   繁体   English

如何结合两个 combineLatest?

[英]How to combine two combineLatest?

What I plan to do is the following:我打算做的是以下几点:

First I dispatch an action (get) to retrieve the data on the backend and insert it into the entities.首先,我调度一个动作(get)来检索后端的数据并将其插入到实体中。

Right after I need to check if this has been loaded and if there are values in the blind, and if there is value, I delete the entire bank.在我需要检查这是否已加载以及盲注中是否有值以及是否有值之后,我删除了整个银行。

And in the second I check if the get() has been loaded and if there are ids in the store entity, and if not, I create a new database.在第二个中,我检查get()是否已加载以及商店实体中是否有 id,如果没有,则创建一个新数据库。

I do this because if I don't reflesh the database is populated but the entities are empty so "bugging" the system.我这样做是因为如果我不刷新数据库已填充但实体为空,因此会“窃听”系统。

What happens below is that if I leave the two combiners in this way, none of them is triggered, if I remove a combiner it is triggered correctly.下面发生的情况是,如果我以这种方式离开两个组合器,它们都不会被触发,如果我移除一个组合器,它会被正确触发。

How do I activate both according to the correct condition and finish when the component is destroyed?如何根据正确的条件激活并在组件被销毁时完成?

combineLatest([this.peopleSelectorsService.loading, this.peopleSelectorsService.allIds])
        .pipe(skipWhile((observables) => observables[0] || observables[1].length === 0))
        .subscribe((observables) => {
            console.log('entrou 1');
            const peopleIds = observables[1];
            this.peopleDispatchService.deleteAll(peopleIds as Array<string>);
        });

    combineLatest([this.peopleSelectorsService.loading, this.peopleSelectorsService.allIds])
        .pipe(skipWhile((observables) => observables[0] || observables[1].length !== 5))
        .subscribe(() => {
            console.log('entrou 2');
            this.peopleDispatchService.createAll([
                { id: '0', isMain: true, name: 'THIAGO DE BONIS CARVALHO SAAD SAUD', avatar: 'assets/users/thiagobonis.jpg', messages: null },
                { id: '1', isMain: false, name: 'BILL GATES', avatar: 'assets/users/billgates.jpg', messages: null },
                { id: '2', isMain: false, name: 'STEVE JOBS', avatar: 'assets/users/stevejobs.jpg', messages: null },
                { id: '3', isMain: false, name: 'LINUS TORVALDS', avatar: 'assets/users/linustorvalds.jpg', messages: null },
                { id: '4', isMain: false, name: 'EDSGER DIJKSTRA', avatar: 'assets/users/dijkstra.jpg', messages: null },
            ]);
        });

This kind of logic in the component feels a little odd.组件中的这种逻辑感觉有点奇怪。 Id suggest throwing it into the effects file since it is indeed a side effect with service calls.我建议将其放入效果文件中,因为它确实是服务调用的副作用。 However, to answer your question, here's the best that I could come up with.但是,要回答您的问题,这是我能想到的最好的方法。 Please keep in mind that I may have completely misunderstood your question.请记住,我可能完全误解了你的问题。

unscubscribe$ = new Subject<boolean>();

combineLatest([this.peopleSelectorsService.loading, 
this.peopleSelectorsService.allIds])
    .pipe(
    filter((observables) => !observables[0]), // dont do anything when loading
    takeUntil(unscubscribe$), // destroys the observable
    .subscribe((observables) => {
        if(observables[1] && observables[1].length === 0) { //your first scenario
         console.log('entrou 1');
         const peopleIds = observables[1];
         this.peopleDispatchService.deleteAll(peopleIds as Array<string>);            
        } else if(observables[1] && observables[1].length !== 5) { //your second scenario
        this.peopleDispatchService.createAll([
            { id: '0', isMain: true, name: 'THIAGO DE BONIS CARVALHO SAAD SAUD', avatar: 'assets/users/thiagobonis.jpg', messages: null },
            { id: '1', isMain: false, name: 'BILL GATES', avatar: 'assets/users/billgates.jpg', messages: null },
            { id: '2', isMain: false, name: 'STEVE JOBS', avatar: 'assets/users/stevejobs.jpg', messages: null },
            { id: '3', isMain: false, name: 'LINUS TORVALDS', avatar: 'assets/users/linustorvalds.jpg', messages: null },
            { id: '4', isMain: false, name: 'EDSGER DIJKSTRA', avatar: 'assets/users/dijkstra.jpg', messages: null },
        ]);
        }
    });

ngOnDestroy() {
 //triggers the unsubscription
 this.unscubscribe$(true);
 this.unscubscribe$.unsubscribe();
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM