使用 redux-observable 分派多个动作 [英] dispatch multiple actions with redux-observable

问题描述

在用户单击表单上的登录按钮后，我想分派一个动作，该动作将在请求完成时触发表单上的微调器.我已经尝试了在这个问题上发布的解决方案，但我收到了一个错误 redux-observable dispatch actions

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

这是我的史诗:

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 的帮助下:

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

推荐答案

我的想法:

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 分派多个动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！