Reactjs 使用异步方法进行React redux可观测

我正在尝试使用react/redux和异步操作来实现可观测，以下是我的epic代码，到目前为止，一切都正常工作：

export function requestDataEpic (action$, store) {    
   return action$.pipe(ofType(REQUEST_DATA),
     mergeMap(({ payload }) => {
        return Observable.ajax.get(`${API_URL}/${payload.userId}`)
    .flatMap((result) => {
       return Observable.of(requestDataSucess({ result }))
     })
     .catch((error) => {
       return Observable.of(requestDataFailure({ error }))
     })
   }),
   catchError((error) => {      
     alertError({ error })
     return empty()
   })
  )
}

这完全符合预期

现在，当我尝试调用getData函数（执行异步调用）而不是直接调用Observable.ajax.get时，问题就出现了。我想调用此函数，该函数将验证API令牌，然后处理Observable.ajax调用，例如：

export default async function getData ({ URL, userId }) {

  const { token } = await verifyToken()

  const params = {
    token,
    userId,
  }

  const query = Object.keys(params)
    .map((key) => key + '=' + params[key])
    .concat(fields)
    .join('&')

  return Observable.ajax.get(URL + query)
}

最后的代码如下所示：

export function requestDataEpic (action$, store) {    
  return action$.pipe(ofType(REQUEST_DATA),
    mergeMap(({ payload }) => {
      return getData(API_URL, payload.userId)
     .flatMap((result) => {
       return Observable.of(requestDataSucess({ result }))
      })
     .catch((error) => {
       return Observable.of(requestDataFailure({ error }))
     })
   }),
   catchError((error) => {      
     alertError({ error })
     return empty()
   })
 )

}

我得到一个（getData.default）（…）flatMap不是一个函数

如果我删除函数声明中的异步字并删除wait verifyToken（），那么它会再次工作

有些事情我还不完全理解，我不能把所有事情都变成可观察的，我需要继续使用异步的东西

任何帮助都会很棒

多谢各位

我不能把一切都变成可观察的，我需要继续使用异步的东西

实际上，你可以而且应该最终将任何东西转换为可观察的

flatMap

在承诺中不存在，因此存在错误

getData

没有意义，因为它混合了承诺和可观测值，并返回可观测值的承诺。必须选择其中一个，例如：

async function getData ({ URL, userId }) {
  const { token } = await verifyToken()
  ...
  return Observable.ajax.get(URL + query).toPromise()
}

可以使用

mergeMap

/

switchMap

运算符或

from

将承诺转换为可观测值。如果您已经在使用承诺，则无需使用

flatMap

：

   return action$.pipe(ofType(REQUEST_DATA),
     mergeMap(async ({ payload }) => {
       try {
         const result = await Observable.ajax.get(`${API_URL}/${payload.userId}`).toPromise();
         return requestDataSucess({ result });
       } catch (error) {
         return requestDataFailure({ error });
       }
     })
   })

---

在操作中检测到不可序列化的值。这意味着未正确处理结果。在上面的代码中，它取决于

requestdatasuces

的工作方式。该代码段丢失了

toPromise

，已修复。如果问题仍然存在，请考虑一个反映您问题的问题。当我将一个异步函数传递给CyrMeMAP时，我会收到这个错误。当我删除async时，一切都正常。但是我需要一个异步函数，因为我使用异步存储