在 RxJS + Redux + Axios 中调度多个动作

问题描述

我正在创建一个登录史诗并分派多个操作，多个操作在“CatchError”内分派得很好，但会产生错误“操作必须是普通对象。使用自定义中间件进行异步操作。”当在 'else' 块中的 observable 中分派动作时。

export const loginUserEpic = action$ =>
action$.pipe(
    ofType(LOGIN_USER),switchMap(({ payload: { email,password } }) => {
      const body = {
        email: email,password: password
      };

  return from(axios.post(`${process.env.REACT_APP_BACKEND}/api/auth/login`,body,config)).pipe(
    map(response => {
      if (response.data.user.is_active) {
        return { type: "LOGIN_SUCCESS",payload: response.data };
      } else {
        return of(
          { type: "USER_LOADING" },{ type: "TOGGLE_MODAL" },updateModalData(modalTypes.EMAIL_SENT,"")
        );
      }
    }),catchError(err =>
      of({ type: "LOGIN_FAIL" },createalert(alertTypes.RED_ALERT,err.data,err.status))
    )
  );
}));

解决方法

我使用了mergemap，所以我可以返回一个observable：

    export const loginUserEpic = action$ =>
  action$.pipe(
    ofType(LOGIN_USER),switchMap(({ payload: { email,password } }) => {
  const body = {
    email: email,password: password
  };

  return from(axios.post(`${process.env.REACT_APP_BACKEND}/api/auth/login`,body,config)).pipe(
    mergeMap(response => {
      if (response.data.user.is_active) {
        return of({ type: "LOGIN_SUCCESS",payload: response.data });
      } else {
        return of(
          { type: "USER_LOADING" },{ type: "TOGGLE_MODAL" },updateModalData(modalTypes.EMAIL_SENT,"")
        );
      }
    }),// takeUntil(actions$.pipe(ofType(CANCEL))),catchError(err =>
      of({ type: "LOGIN_FAIL" },createAlert(alertTypes.RED_ALERT,err.data,err.status))
    )
  );
})

);