I am using rxfire to combine data from firestore in 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 });
})
The problem with this code is not firing and the screen stuck with the loading component. If I load the screen a second time it works. Am I doing something wrong? How can I fix it
If it's not working until you reload, there could be a timing issue based on when items$ and categories$ emit their own values.
A safer approach to combining these observables would be with the combineLatest() feature from RxJS. It accepts an array of observables, and doesn't emit until it receives a value from every observable.
combineLatest([store$, items$, categories$]).pipe(
map(([store, items, categories])=>({...store, ...items, ...categories})),
tap(store=>this.setState({ store, isLoading: false })
).subscribe();
Keep in mind with combineLatest() that if any observable inside the array doesn't emit a value, then combineLatest() will never emit a value.