[英]Best way to chain Observables using RxJs in React
In this scenario, what would be the best was to chain the Observables and to dispatch the SEARCH_QUERY_COMPLETE
action once all the subscriptions are completed?在这种情况下,最好的方法是链接 Observables 并在所有订阅完成后分派SEARCH_QUERY_COMPLETE
操作? I noticed that forkJoin
is deprecated...我注意到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,
});
};
Here is the blueprint of getOrderDetails
这是getOrderDetails
的蓝图
export interface IOrderDetailRepository {
getOrderDetails: (query: string) => Observable<IOrderDetail[]>;
}
You can use forkJoin
like this -您可以像这样使用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,
});
});
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.