Подписка rxfire не запускается в componentdidmount

Question

Я использую rxfire для объединения данных из firestore в componentdidmount:

      store$.pipe(
      withLatestFrom(items$),  
      map(([store, items]) => ({ items, ...store })),    
    ).pipe(   
      withLatestFrom(categories$),       
      map(([store, categories]) => ({ categories, ...store })),
    ).subscribe(store => {      
      this.setState({ store: store, isLoading: false });
    })   

Проблема с этим кодом заключается в том, что он не запускается, и экран застревает в загружаемом компоненте. Если я загружу экран второй раз, он заработает. Я делаю что-то неправильно? Как я могу это исправить

Answer 1

Если он не работает до тех пор, пока вы не перезагрузите, возможно, проблема с синхронизацией в зависимости от того, когда items$ и categories$ испускают собственные значения.

Более безопасный подход к объединению этих наблюдаемых - это функция RxJS. Он принимает массив наблюдаемых и не генерирует, пока не получит значение от каждого наблюдаемого.

      combineLatest([store$, items$, categories$]).pipe(
  map(([store, items, categories])=>({...store, ...items, ...categories})),
  tap(store=>this.setState({ store, isLoading: false })
).subscribe();

Имейте в виду, что если какой-либо наблюдаемый внутри массива не испускает значение, тогда combineLatest() никогда не выдаст значение.