在 React 中使用 RxJs 链接 Observable 的最佳方法答案

【问题标题】：Best way to chain Observables using RxJs in React在 React 中使用 RxJs 链接 Observable 的最佳方法
【发布时间】：2021-01-01 11:25:58
【问题描述】：

在这种情况下，最好的办法是链接 Observables 并在所有订阅完成后调度 SEARCH_QUERY_COMPLETE 操作？我注意到 forkJoin 已被弃用...

const launchSearchQuery = () => {
    mainDispatch({
      type: ActionTypes.LAUNCH_SEARCH_QUERY,
    });

    if (mainState.searchSection.searchQuery !== "") {
      // get order details
      orderDetailRepository.getOrderDetails(mainState.searchSection.searchQuery).subscribe((response) => {
        searchResultCards.push(mapSearchResultCard(response, DashboardSectionTitles.ORDER_DETAILS));
      });
      // get customer details
      customerDetailRepository.getCustomerDetails(mainState.searchSection.searchQuery).subscribe((response) => {
        searchResultCards.push(mapSearchResultCard(response, DashboardSectionTitles.CUSTOMER_DETAILS));
      });
      // get equipment details
      equipmentDetailRepository.getEquipmentDetails(mainState.searchSection.searchQuery).subscribe((response) => {
        searchResultCards.push(mapSearchResultCard(response, DashboardSectionTitles.EQUIPMENT_DETAILS));
      });
      // get equipment return details
      equipmentReturnDetailRepository
        .getEquipmentReturnDetails(mainState.searchSection.searchQuery)
        .subscribe((response) => {
          searchResultCards.push(mapSearchResultCard(response, DashboardSectionTitles.EQUIPMENT_RETURN_DETAILS));
        });
    }
    
    // !!! only execute this when all subscriptions are completed !!!
    mainDispatch({
        type: ActionTypes.SEARCH_QUERY_COMPLETE,
        payload: searchResultCards,
    });

  };

这是getOrderDetails的蓝图

export interface IOrderDetailRepository {
  getOrderDetails: (query: string) => Observable<IOrderDetail[]>;
}

【问题讨论】：

您为什么认为forkJoin 已被弃用？（好像还好）
从 6.6.0 版开始，我收到此消息：@deprecated — Use the version that takes an array of Observables instead
这只是以前的签名，您仍然可以通过传递带有可观察对象的数组或对象来使用它。请参阅forkJoin documentation 上的示例

标签： javascript reactjs typescript rxjs observable

【解决方案1】：

你可以像这样使用forkJoin -

const launchSearchQuery = () => {
            mainDispatch({
              type: ActionTypes.LAUNCH_SEARCH_QUERY,
            });
        

            
            if (mainState.searchSection.searchQuery !== "") {
                forkJoin([
                    // get order details
                    orderDetailRepository.getOrderDetails(mainState.searchSection.searchQuery),
                    // get customer details
                    customerDetailRepository.getCustomerDetails(mainState.searchSection.searchQuery),
                    // get equipment details
                    equipmentDetailRepository.getEquipmentDetails(mainState.searchSection.searchQuery),
                    // get equipment return details
                    equipmentReturnDetailRepository.getEquipmentReturnDetails(mainState.searchSection.searchQuery)
                ]).subscribe(([orderDetails, customerDetails, equipMentDetails, equimentReturnDetails]) => {
                    searchResultCards.push(mapSearchResultCard(orderDetails, DashboardSectionTitles.ORDER_DETAILS));
                    searchResultCards.push(mapSearchResultCard(customerDetails, DashboardSectionTitles.CUSTOMER_DETAILS));
                    searchResultCards.push(mapSearchResultCard(equipMentDetails, DashboardSectionTitles.EQUIPMENT_DETAILS));
                    searchResultCards.push(mapSearchResultCard(equimentReturnDetails, DashboardSectionTitles.EQUIPMENT_RETURN_DETAILS));
    
                    // !!! only execute this when all subscriptions are completed !!!
                    mainDispatch({
                        type: ActionTypes.SEARCH_QUERY_COMPLETE,
                        payload: searchResultCards,
                    });
                });
            }
        
          };

【讨论】：

知道了，您仍然可以使用将数组作为参数的forkJoin([]) 覆盖。
是的，forJoin。实际上，forkJoin 早期的语法已被弃用（它曾经将 observables 作为不同的参数）。根据新语法，它需要一组可观察对象。