Share data api with BehaviorSubject - architecture Observables Store

Issue

I would just like to make a call in the api and reuse the data in an observable, like a kind of store like in redux.

API URL: http://demo5095413.mockable.io/consolidado

Stackblitz project : https://stackblitz.com/edit/angular-ivy-iy9zhv?file=src/app/core.service.ts

Service responsible for connection with api

@Injectable({
  providedIn: 'root'
})
export class ConsolidadoApi {
  
  constructor(private http: HttpClient) { }

  getInvestiments(): Observable<any> {
    return this.http.get<PosicaoConsolidada>(`${environment.basePosicaoConsolidada}`)
      .pipe(
        map(res => res),
        shareReplay(),
      )
  }
}

Service where the data is processed, my facade layer(store) Initially this way, this observable is responsible for making the call in the api. At the end of it I issue a BehaviorSubject

export class CoreService {

    private subject = new BehaviorSubject<any>([]);
    investment$: Observable<any> = this.subject.asObservable();
    
    constructor(private api: ConsolidadoApi, private loadingService: LoadingService, public messagesService: MessagesService, public state: StateService) {
        this.getInvesmentsPortifolio$()
     }

    public getInvesmentsPortifolio$(): Observable<Carteiras> {
        return this.api.getInvestiments()
            .pipe(
                map(response => response.carteiras),
                catchError(err => {
                    const message = "Error Investments";
                    this.messagesService.showErrors(message);
                    console.log(message,err);
                    return throwError(err);
                }),
                tap(investment$ => this.subject.next(investment$))
            )
    }

That's how I would like to do it, access the observable that already has all the investment portfolios and from there create an observable from the investment portfolio "Agora"

getPortifolioAgora(): Observable<any> {
    return this.investment$
        .pipe(
            map(response => response.carteiras.find(
                carteira => carteira.tipoInvestimento === "AGORA"
            ))
        );
}

But in my component dont work

    constructor(public coreService: CoreService, private loadingService: LoadingService) { }

  ngOnInit(): void {
    this.loadData()
  }

  public loadData(){
    this.loadingService.loadingOn()
    
    this.coreService.getPortifolioAgora().subscribe(res => {
      console.log(res)
    })

    this.coreService.getInvesmentsPortifolio$().subscribe(res => {
      this.carteiras = res
      console.log('All portifolio investments----->',res)
    })

  }

Properties undefined?

I know if i do it that way the find works.

// In this observable I access directly in the api and I can access the investment portfolio Agora
// it's working, but I wouldn't want to do it that way because I would have made another call on the server
public portifolioAgora$(): Observable<Carteiras> {
    return this.api.getInvestiments()
        .pipe(
            map(response => response.carteiras.find(
                carteira => carteira.tipoInvestimento === "AGORA"
            )),
            finalize(() => this.loadingService.loadingOff())
            //tap(data => console.log(data, JSON.stringify(data)))
        )
}

Solution

Since in getInvesmentsPortifolio$() you are adding only carteiras array into BehaviourSubject So, inside getPortifolioAgora update map code to

 getPortifolioAgora(): Observable<any> {
    return this.investment$.pipe(
      map((response) =>
        response.find((carteira) => carteira.tipoInvestimento === 'AGORA')
      )
    );
  }

Also the problem can be you are calling getPortifolioAgora before getInvesmentsPortifolio$, the result will not be available in Subject at very initial load

Answered By - navnath