redux-observable：如何单次调用rootEpic等待多个异步Action？

Got it, let's solve this problem of waiting for three distinct actions without repeating calls to your rootEpic. The key here is leveraging RxJS operators to combine streams of the actions you care about, then converting that combined stream into a single Promise you can await.

Approach 1: Use forkJoin for Strict "All Complete" Waiting #

forkJoin is perfect here because it waits for all input observables to emit at least one value and complete, then emits an array of their last emitted values. This is ideal if you need to ensure all three asynchronous actions (like API calls that resolve to these actions) have fully finished.

Here's how to implement it:

import { forkJoin, ofType } from 'redux-observable';
import { map, take, timeout } from 'rxjs/operators';

// Define your target action types
const ACTION_A = 'FETCH_USER_SUCCESS';
const ACTION_B = 'FETCH_POSTS_SUCCESS';
const ACTION_C = 'FETCH_COMMENTS_SUCCESS';

async function waitForThreeCriticalActions(actions$) {
  // Create a stream for each action that takes only the first occurrence
  const actionA$ = actions$.pipe(ofType(ACTION_A), take(1));
  const actionB$ = actions$.pipe(ofType(ACTION_B), take(1));
  const actionC$ = actions$.pipe(ofType(ACTION_C), take(1));

  try {
    // Wait for all three actions to complete
    const [userAction, postsAction, commentsAction] = await forkJoin([
      actionA$,
      actionB$,
      actionC$
    ]).pipe(
      // Add a timeout to avoid hanging indefinitely if an action never fires
      timeout(10000)
    ).toPromise();

    // Process the results of all three actions
    console.log('All actions completed:', {
      user: userAction.payload,
      posts: postsAction.payload,
      comments: commentsAction.payload
    });

    return { userAction, postsAction, commentsAction };
  } catch (err) {
    // Handle timeouts or other errors
    console.error('Failed to wait for all actions:', err);
    throw err;
  }
}

How This Works #

• ofType: Filters the action stream to only include the specific action types you're waiting for.
• take(1): Ensures each stream completes after emitting the first matching action (so forkJoin knows when each action is "done").
• forkJoin: Combines the three streams and waits for all of them to complete before emitting their results.
• timeout: Adds a safety net to prevent the Promise from hanging forever if one of the actions never triggers.

Approach 2: Use combineLatest for "All Triggered" (No Strict Completion) #

If you don't need to wait for the underlying asynchronous operations to fully resolve—just need to know all three actions have been dispatched at least once—you can use combineLatest with take(1):

import { combineLatest, ofType } from 'redux-observable';
import { map, take } from 'rxjs/operators';

async function waitForThreeActionsDispatched(actions$) {
  const [actionA, actionB, actionC] = await combineLatest([
    actions$.pipe(ofType(ACTION_A), take(1)),
    actions$.pipe(ofType(ACTION_B), take(1)),
    actions$.pipe(ofType(ACTION_C), take(1))
  ]).pipe(take(1)).toPromise();

  // Do something with the dispatched actions
  return { actionA, actionB, actionC };
}

combineLatest emits as soon as all streams have emitted at least one value—this is slightly different from forkJoin which waits for all streams to complete. Use this if your actions don't represent the end of an async process, just a dispatched event.

Integrating with Your Root Epic #

You don't need to modify your rootEpic directly. Instead, you can call this function wherever you need to wait for the three actions (e.g., in a Next.js getServerSideProps function, or a component initialization hook) by passing the actions$ stream from your store.

For example, in Next.js:

export async function getServerSideProps(context) {
  const store = createStore(rootReducer, rootEpic);
  const actions$ = store.actions$; // Assuming your store exposes the actions stream

  // Wait for the three actions to complete
  await waitForThreeCriticalActions(actions$);

  // Get the final state and pass it to the page
  const state = store.getState();
  return { props: { state } };
}

Key Notes #

• Avoid Hanging: Always add a timeout operator if there's any chance an action might never be dispatched—this prevents your Promise from pending forever.
• Action Order: Both forkJoin and combineLatest don't care about the order the actions are dispatched in; they'll wait for all three regardless.
• Reusability: Wrap this logic in a utility function so you can reuse it across your app whenever you need to wait for multiple actions.

内容的提问来源于stack exchange，提问作者Tomasz Mularczyk