在 React 中使用 RxJs 链接 Observables 的最佳方式

Question

在这种情况下，最好的方法是链接 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[]>;
}

Answer 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,
                    });
                });
            }
        
          };

在 React 中使用 RxJs 链接 Observables 的最佳方式

Best way to chain Observables using RxJs in React

javascript

observable

rxjs

typescript

reactjs