React redux-observable：在史诗中进行顺序 API 调用

Question

我正在尝试使用 redux-observable 进行顺序 API 调用。第一个 API 调用的结果数据应用于进行下一个调用。 This post 在 Angular 中解释了如何使用 rxjs 做到这一点，但我无法传递知识。

我编码了两个 epics，我想合并它们：

const createList: Epic = (action$) => action$.pipe(
  /*
  * Post a new empty list
  */
  ofType(CREATE_LIST),
  switchMap(({ payload }) => {
    const [postData, config] = prepareListRequest(payload);
    return from(axios.post<IAPIList>('http://127.0.0.1:8000/lists/', postData, config))
      .pipe(
        map(({ data }) => createListSuccessAction(data)),
        catchError((err) => of(ErrorAction(err))),
      );
  }),
);

const createItem: Epic = (action$) => action$.pipe(
  /*
  * Post a new item. Here the listID is in the payload. 
  */
  ofType(CREATE_ITEM),
  switchMap(({ payload }) => {
    const [postData, config] = prepareItemRequest(payload);
    return from(axios.post<IAPIItem>('http://127.0.0.1:8000/items/', postData, config,))
      .pipe(
        map(({ data }) => createItemSuccessAction(data)),
        catchError((err) => of(ErrorAction(err))),
    );
  }),
);

我的目标：第一个调用发布一个空列表，第二个调用接收从服务器发回的 list.id 响应并为该列表发布一个项目。（条纹下来，只是为了明确我的目标）

const createPopulatedList: Epic = (action$) => action$.pipe(
  ofType(CREATE_POPULATED_LIST),
  res = firstAPICall(payload.list)
  secondAPICall(payload.item, res.id)
);

预先感谢您的宝贵时间:)

Answer 1

利用 RxJS 的能力 auto-convert 向可观察对象承诺并使用 mergeMap + 异步函数。

const createPopulatedList = (action$) => action$.pipe(
  ofType(CREATE_POPULATED_LIST),
  mergeMap(async ({ list, item }) => {
    const { id } = await firstAPICall(list);
    return secondAPICall(item, id);
  })
);

React redux-observable：在史诗中进行顺序 API 调用

React redux-observable: Making sequential API calls in an epic

reactjs

redux

rxjs

redux-observable