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

Question

我正在创建一个登录史诗并调度多个操作，多个操作在"CatchError"中被很好地调度，但会产生错误"操作必须是普通对象。使用自定义中间件执行异步操作"在"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

我使用了合并映射，这样我就可以返回一个可观察的：

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

)；