如何在redux-observable中组合并顺序执行多个Epic？

我明白你的问题了——用redux-thunk做这种串行异步操作确实很直观，但换到redux-observable+RxJS的话，得切换到流的思维来处理。下面是实现fetchCharacterAndPlanetEpic的具体方案，完全满足你“第一个操作结果派发至store后再启动第二个操作”的要求：

核心思路 #

我们需要让组合Epic完成两个关键步骤：

1. 先触发GET_CHARACTER操作，等待对应的GET_CHARACTER_SUCCESS action被派发（这意味着第一个Epic已经完成请求，且结果已更新到store）；
2. 收到GET_CHARACTER_SUCCESS后，再触发GET_PLANET操作。

完整代码实现 #

首先我们需要定义一个新的action类型，用来触发这个组合操作：

// 定义组合操作的action类型
const GET_CHARACTER_AND_PLANET = 'GET_CHARACTER_AND_PLANET';

// 对应的action creator（假设你需要传递characterId和planetId，可根据实际调整）
export const getCharacterAndPlanet = (characterId, planetId) => ({
  type: GET_CHARACTER_AND_PLANET,
  payload: { characterId, planetId }
});

接下来是核心的fetchCharacterAndPlanetEpic：

import { Observable } from 'rxjs';
import { concatMap, take, mergeMap } from 'rxjs/operators';

const fetchCharacterAndPlanetEpic = (action$) => action$.ofType(GET_CHARACTER_AND_PLANET)
  .pipe(
    concatMap(({ payload: { characterId, planetId } }) => {
      // 第一步：派发获取角色的action，交给characterEpic处理
      const fetchCharacterAction = { type: GET_CHARACTER, id: characterId };

      // 先发出获取角色的action，再等待其成功后发出获取星球的action
      return Observable.of(fetchCharacterAction)
        .concat(
          action$.ofType(GET_CHARACTER + SUCCESS, GET_CHARACTER + FAILURE)
            .pipe(
              take(1), // 只取当前流程的第一个结果，避免干扰其他操作
              mergeMap((resultAction) => {
                if (resultAction.type === GET_CHARACTER + SUCCESS) {
                  // 角色获取成功，触发星球获取操作
                  return Observable.of({ type: GET_PLANET, id: planetId });
                } else {
                  // 角色获取失败，直接传递失败action，不触发后续操作
                  return Observable.of(resultAction);
                }
              })
            )
        );
    })
  );

关键细节解释 #

1. concatMap确保顺序执行：每个GET_CHARACTER_AND_PLANET action都会被串行处理，不会出现并行冲突；
2. take(1)的必要性：避免监听全局的GET_CHARACTER_SUCCESS时，误捕获其他地方触发的相同action，只处理当前流程的结果；
3. 错误分支处理：如果第一个请求失败，我们会直接传递失败action，不会触发第二个请求，符合业务逻辑；
4. 依赖第一个结果的场景：如果你的星球ID需要从角色请求的结果中获取（比如角色数据里的homeworld字段），可以修改mergeMap里的逻辑：

   mergeMap((successAction) => {
     // 从角色成功action的payload中提取星球ID
     const planetId = successAction.payload.homeworld.id;
     return Observable.of({ type: GET_PLANET, id: planetId });
   })
   

为什么这能满足你的要求？ #

当fetchCharacterAction被派发后，characterEpic会执行请求，完成后派发GET_CHARACTER_SUCCESS action——这个action会先进入store更新状态，然后才会被action$流捕获，此时我们才会触发第二个操作。完全符合“第一个操作结果先更新store，再启动第二个操作”的要求。

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