基于BehaviorSubject共享API数据实现类Redux Observable Store的问题

问题根因 #

核心问题是你缓存到BehaviorSubject的数据结构和筛选时读取的结构不匹配：

1. 在getInvesmentsPortifolio$方法中，你已经通过map(response => response.carteiras)把接口返回的完整响应处理为carteiras数组，后续通过tap推送到BehaviorSubject的值本身就是carteiras数组，而非接口返回的完整对象。
2. 但你在getPortifolioAgora方法中仍然尝试读取response.carteiras，数组类型的response不存在carteiras属性，读取结果为undefined，调用find方法自然无法得到预期值。
3. 额外优化点：BehaviorSubject的初始值是空数组，在接口请求未返回的阶段，订阅会先拿到空数组，调用find也会返回undefined，可以加过滤逻辑跳过无效的初始值。

解决方案 #

第一步：修正筛选方法逻辑 #

直接对缓存的carteiras数组做筛选，新增过滤逻辑跳过无效的初始值：

getPortifolioAgora(): Observable<any> {
    return this.investment$
        .pipe(
            // 过滤空数组等无效值，避免返回undefined
            filter(carteiras => Array.isArray(carteiras) && carteiras.length > 0),
            map(carteiras => carteiras.find(
                carteira => carteira.tipoInvestimento === "AGORA"
            ))
        );
}

第二步：优化重复请求逻辑（可选） #

你已经给接口请求加了shareReplay不会重复发起请求，但可以新增加载标记避免重复触发逻辑：

// CoreService 新增加载状态标记
private hasLoaded = false;

public getInvesmentsPortifolio$(): Observable<Carteiras> {
    // 已加载过直接返回缓存的可观察对象
    if (this.hasLoaded) {
        return this.investment$;
    }
    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.hasLoaded = true;
                this.subject.next(investment);
            })
        )
}

第三步：组件调用优化（可选） #

CoreService的构造函数已经主动触发了接口请求，组件中不需要再重复调用getInvesmentsPortifolio$，直接订阅investment$即可拿到全量数据。

内容的提问来源于stack exchange，提问作者Guilherme Lucas