4

I have an ngrx store that contains multiple states. I'm trying to construct one object (Rent object) by gathering data from each state: Here is my code:

ngOnInit() {


  //Fetch the rent and its properties data
  const rentID = +this.route.snapshot.params['id'];

  let rentState$ = this.store.select('rentState');
  let clientState$ = this.store.select('clientState');
  let vehiculeState$ = this.store.select('vehiculesState');
  let paymentState$ = of(null);//TODO

  let importRent$ = forkJoin([rentState$, vehiculeState$, clientState$, paymentState$])
    .pipe(mergeMap(([rentData, vehiculeData, clientData, paymentData]: [any, any, any, any]) => {
      let rent = new Rent();

      rent = rentData.rentList.filter(rent => rent.id === rentID)[0];

      rent.vehicule = vehiculeData.vehicules.filter(vehicule => vehicule.id === this.rent.vehicule.id)[0];

      rent.client = clientData.clientList.filter(client => client.id === this.rent.client.id)[0];
      rent.companion = clientData.companionList.filter(companion => companion.id === this.rent.companion.id)[0];

      //TODO: retrieve payments

      return of(rent);
    }))


  importRent$.subscribe(data => console.log('hello'));

}

But I don't get any message 'hello' in my console. For some reason the code the subscription does not happen.

I already have these imports in my code:

import { Observable } from 'rxjs/Observable';
import { forkJoin } from 'rxjs/observable/forkJoin';
import { of } from 'rxjs/observable/of';
import { mergeMap } from 'rxjs/operators';

The store already has data in it. Any idea what am I doing wrong?

3
  • 1
    Are you positive that ALL of the states emit and complete? Try with combineLatest? And I don't think you need to put the observables in an array as a paramter for forkJoin
    – Chau Tran
    Commented Apr 17, 2018 at 17:30
  • 3
    forkJoin requires all source Observables to complete. Maybe in your case it would be sufficient to chain this.store.select('rentState') with pipe(take(1))
    – martin
    Commented Apr 17, 2018 at 17:30
  • 1
    @ChauTran, You are right, it seems the states did not complete and emit. I used combineLatest and it worked. Why don't you submit it as an answer I mark it as one. Thank you
    – Ayoub.A
    Commented Apr 17, 2018 at 17:43

2 Answers 2

6

Are you positive that ALL of the states emit and complete? Try with combineLatest? And I don't think you need to put the observables in an array as a paramter for forkJoin.

While using combineLatest, everytime a child-source Observable emits after the initial emit of all child-source, the whole thing emits. You might wanna look into distinctUntilChanged as well if you don't want over-emitting scenario.

1 emits, 2 emits => combineLatest emits => 1 emits => combineLatest emits etc...

4

As @martin said in his comment

forkJoin requires all source Observables to complete.

So you just need to take the first value emitted with take(1) or first():

let importRent$ = combineLatest(
  rentState$.pipe(take(1)), 
  vehiculeState$.pipe(take(1)), 
  clientState$.pipe(take(1)), 
  paymentState$.pipe(take(1))
)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.