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

Question

我正在创建登录史诗并分派多个操作，多个操作在 'CatchError' 内分派正常但产生错误“操作必须是普通的 objects。使用自定义中间件进行异步操作”在 'else' 块中的可观察对象内调度操作时。

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))
    )
  );
}));

Answer 1

我使用了 mergemap 所以我可以 return 一个可观察的：

    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))
    )
  );
})

);

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

Dispatch multiple actions within RxJS + Redux + Axios

reactjs

react-redux

rxjs

rxjs6

redux-observable