Redux observable 不处理后端响应

Question

我正在为后端调用实现一个史诗。响应未按预期处理。

对于我的实现，我正在使用以下模块：

• "axios"： "^0.17.1"，
• "redux-observable"： "^1.1.0"，
• "rxjs"： "^6.5.2"，
• "类型安全操作"： "^4.4.0">

Action.ts

export const callBackendAction = createStandardAction('data/GET')();
export const callBackendCompletedAction = createStandardAction('data/LOADED')<IResultDataDTO[]>();

史诗

export const callBackendEpic: Epic<RootAction, RootAction> = action$ =>
    action$.pipe(
      filter(isActionOf(callBackendAction)),
      switchMap(async () =>
        from(axiosBackendCall())
          .pipe(
            switchMap(({ data }) => {
              return of(callBackendCompletedAction(data.map(data)))
            }),
            catchError(error => of(console.log(error)))
          )
      ),
      catchError(error => of(console.log(error)))
    );

Reducer.ts

export interface IcallBackendReducerState
{
  data: {}[];
  pending: boolean;
}
const initialState : ICallBackendReducerState =
{
  data: [],
  pending: false
}
export const callBackendReducer = createReducer(initialState)
  .handleAction(callBackendAction, (state: ICallBackendReducerState): ICallBackendReducerState => (
    { ...state, pending: true }
  ))
  .handleAction(callBackendCompletedAction, (state: ICallBackendReducerState, action: PayloadAction<string, any>) => ({
    ...state,
    pending: false,
    data: action.payload
  }));

Redux 抛出可能与此问题相关的错误：

Error: Actions must be plain objects. Use custom middleware for async actions.

我的预期输出将是一个后端调用，它会触发化简器将挂起状态设置为 true。 <---这与实际输出匹配

通过接收响应，应触发化简器以使用数据和挂起状态 false 更新状态。 <---这不会发生

查看浏览器中的网络流量显示呼叫确实完成。问题是它没有得到妥善处理。

Answer 1

看起来问题出在这两行上：

switchMap(async () =>
  from(axiosBackendCall())

通过使用async可以使内部函数返回一个承诺，但随后你使用返回一个可观察量的from()，所以实际上这个箭头函数返回Promise<Observable>这不是你想要的。 switchMap只会订阅承诺而不是嵌套的可观察对象，所以redux很困惑为什么你传递的不是Observable的操作。

所以修复很简单，只是不要使用async，因为你甚至不需要它。 from将自动处理从axiosBackendCall()返回的承诺(我假设axiosBackendCall返回一个承诺(。

switchMap(() =>
  from(axiosBackendCall())
    .pipe(...)
),