使用 redux-observable 分派多个动作

Question

用户单击表单上的登录按钮后，我想分派一个操作，该操作将在请求完成时触发表单上的微调器。我已尝试针对此问题发布的解决方案，但出现错误

以下是用户单击登录按钮时调度的操作：

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

这是我的史诗：

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

编辑：在@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

我的想法：

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

使用 redux-observable 分派多个动作

dispatch multiple actions with redux-observable

rxjs

reactjs

redux-observable