How to combine two combineLatest?

Question

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.

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.

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 },
            ]);
        });

Answer 1

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();
}