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