There are many ways to expose data to components, but based on different usecase, different solution has PROS & CONS.
1. ShareReplay(1)
PROS: ShareReplay(1) solves a problem which if you have multi subscribers, it will trigger API requests multi times if you don't have shareReplay(1) in place.
CONS: data is static, not dynamic. If you want to add/remove/update the data, you have to fetch new data again.
2. Subject as a service
We can keep a local copy of data using BehaviorSubject. Everytime, we add/remove/update, will trigger subject update.
PROS: Solve the problem for static data, now it is dynamic and it won't trigger multi API calls.
CONS: It has race condition. If you try to add multi-times. it might happne that first request's response comes after second request's response.
3. NgRx (ComponentStroe)
https://ngrx.io/guide/component-store
ComponentStore vs Global store: https://ngrx.io/guide/component-store/comparison
We need state for some components, it is not necessary add to global store.
PROS: It handles race condition by using effect (you can define your approach by using concatMap, switchMap, mergeMap, exhaustMap)
concatMap: is a good way to solve race condition.
switchMap: only care new request, ignore old one
exhaustMap: only care the current happening one, ignore new ones during the period
Performance it better, NgRx using select() with memorized function.
CONS: Deep knowledge of RxJS and NgRx.
Misc:
tapResponse:
From
to
Refer:
Filling the Gap in State with NgRx ComponentStore | Alex Okrushko | EnterpriseNG 2020