javascript - 在 React 中使用 RxJs 链接 Observable 的最佳方法

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[]>;
}

标签： javascriptreactjstypescriptrxjsobservable

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