Multiple async action execution order in single epic - redux

Question

I'm trying to setup loginEpic which occurs when user logs in. This is how the logic flow should work:
Epic should start with LOGIN_REQUEST action. Once login promise is finished successfully, user info should be fetched with SYNC_USER_REQUEST action (which is basically whole other epic since this is also called when initially entering site to get user info or redirect to login). Once that finishes successfully (promise and SUCCESS/FAIL calls are handled within syncUserEpic), SYNC_USER_SUCCESS should be caught in loginEpic and LOGIN_SUCCESS should be called along with push action which redirects user to starting page.
This is what I have so far:
const loginEpic: Types.RootEpic = (action$) =>
action$.ofType("LOGIN_REQUEST").pipe(
switchMap(({ payload }) =>
from(membershipService.login(payload.username, payload.password)).pipe(
switchMap((response) => [
syncUser.request(),
action$.ofType("SYNC_USER_SUCCESS").pipe( // I think this is the problem
filter(isActionOf(syncUser.success)),
map(r => login.success(response))
)
]),
takeUntil(action$.ofType(["LOGOUT_REQUEST", "LOGIN_CANCEL"])),
catchError(error => of(login.failure(error))),
endWith(push("/"))
)
)
)
but I'm getting
Actions must be plain objects. Use custom middleware for async
actions.
I'm also cancelling LOGIN_REQUEST/SYNC_USER_REQUEST with LOGOUT_REQUEST or LOGIN_CANCEL actions and also handling login error (I'm not sure if I should also handle sync user error here)

Answer 1

I've managed to implement it this way:
const loginEpic: Types.RootEpic = (action$) =>
action$.pipe(
filter(isActionOf(login.request)),
switchMap(({ payload }) =>
race(
from(membershipService.login(payload.username, payload.password)).pipe(
mergeMap((token) =>
from(membershipService.getUser()).pipe(
mergeMap((user) => [syncUser.success(user), login.success(token)]),
catchError(error => {
// user fetch failed, tell login that user is responsible
return of(login.failure(new BaseError("6010", "User sync failed.")));
})
)
),
catchError(error => of(login.failure(error))),
),
action$.pipe(
filter(isActionOf(logout.request)),
map(() => login.cancel()),
take(1)
)
)
)
)
Based on how it works, race is actually racing whole first block (so not just outer membershipService.login, with logout.request action. I was not aware of this, and I thought I would need another race condition for membershipService.getUser because what I need is that logout.request terminate whole process (even if login was successful and process in middle of fetching user). As far as I could test this, it's working as expected.
If anyone has any thoughts, improvements, fixes, or anti-pattern observations, please let me know.