带有异步方法的 Redux-observable

Question

我正在尝试使用带有异步操作的 react/redux 实现 Observables，这是我的史诗的代码，到目前为止一切正常：

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 不是函数

如果我删除函数声明中的异步字+删除await verifyToken()，那么它会再次起作用。

有些东西我不完全理解，我不能把所有东西都变成 Observable，我需要继续使用异步的东西。

任何帮助都会很棒。

谢谢

Answer 1

我不能把所有东西都变成 Observable，我需要继续使用异步的东西。

您实际上可以并且应该最终将任何东西转换为可观察的。 flatMap 在 Promise 中不存在，因此存在错误。

getData 没有意义，因为它混合了 Promise 和 observables 并返回一个 observable 的 Promise。必须选择其中之一，例如：

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

可以使用 mergeMap/switchMap 运算符或 from 将 Promise 转换为 observables。如果您已经在使用 Promise，则无需使用 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 });
       }
     })
   })