React redux-observable：以史诗般的方式进行顺序 API 调用

Posted 2023-02-19

【中文标题】React redux-observable：以史诗般的方式进行顺序 API 调用

【英文标题】：React redux-observable: Making sequential API calls in an epic

【发布时间】：2020-12-06 12:00:21

【问题描述】：

我正在尝试使用 redux-observable 进行顺序 API 调用。第一次 API 调用的结果数据应该用于进行下一次调用。 This post 解释了如何在 Angular 中使用 rxjs，但我无法转移知识。

我编写了两个史诗，我想将它们合并：

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)
);

提前感谢您的宝贵时间:)

【参考方案1】：

利用 RxJS 将 Promise 自动转换为可观察对象的能力，并使用 mergeMap + 一个异步函数。

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