dispatch multiple actions with redux-observable

Question

After the user clicks the login button on a form, I want to dispatch an action which will trigger a spinner on the form while the request completes. I've tried the solution posted on this question but I'm getting an error redux-observable dispatch actions

Here is the action that's dispatched when the user clicks on the login button:

dispatch(startLoginEpic({ login: loginData, from }));

Here is my epic:

const LoginEpic = (action$, state$) =>
   action$.pipe(
       ofType(types.START_LOGIN_EPIC),
       // map(() =>
       //     loginLoadBegin()),
       switchMap((action) =>
           from(Api.login(action.loginData))
               .pipe(
                   map(({ data: { loginQuery: { id } } }) =>
                       setSession({ sessionId: id })),
                   catchError((error) =>
                   {
                       if (invalidSessionHelper(error))
                       {
                           return of(logOut());
                       }
                       return of({
                           type: 'LOGIN_EPIC_ERROR',
                           payload: {
                               error: error.message,
                           },
                       });
                   }),
               )),
   );

edit: with the help of @mpx2m:

const LoginEpic = (action$, state$) =>
    action$.pipe(
        ofType(types.START_LOGIN_EPIC),
        switchMap((action) =>
            concat(
                of(loginLoadBegin()),
                from(Api.login(action.loginData))
                    .pipe(
                        flatMap(({ data: { loginQuerdy: { id } } }) =>
                            concat(
                                of(setSession({ sessionId: id })),
                                of(loginLoadError()),
                            )),
                        catchError((error) =>
                        {
                            if (invalidSessionHelper(error))
                            {
                                return of(logOut());
                            }
                            return of({
                                type: 'LOGIN_EPIC_ERROR',
                                payload: {
                                    error: error.message,
                                },
                            });
                        }),
                    ),
            )),
    );

Answer 1

my thought:

const LoginEpic = (action$, state$) =>
action$.pipe(
    ofType(types.START_LOGIN_EPIC),
    switchMap((action) => concat(
        of(actions.setLoading({ loading: true }),
            from(Api.login(action.loginData)).pipe(
                mergeMap(RESPONSE => iif(
                    () => RESPONSE.success === true,
                    of(actions.loginSuccess({ DO_SOMETHINS })),
                    of(actions.loginFail({ DO_SOMETHINS }))
                ))
            )
        )
    ))
)