javascript - 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[]>();

史诗.ts

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 抛出一个可能与这个问题相关的错误:

错误:操作必须是普通对象。使用自定义中间件进行异步操作。

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

通过接收响应，reducer 应该被触发以使用数据和未决状态 false 更新状态。 <--- 这不会发生

在我的浏览器中查看网络流量表明调用确实完成了。问题是处理不当。

Answer 1

看起来问题出在这两行:

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

通过使用 async你让内部函数返回一个 Promise，然后你使用 from()返回一个 Observable 所以实际上这个箭头函数返回 Promise<Observable>这不是你想要的。 switchMap将只订阅 Promise 而不是嵌套的 Observable 所以 redux很困惑为什么你传递的不是一个 Action Observable .

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

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