如何使用ngrx / effects执行多个相关的操作/效果/动作

cmatthews.dickson 发表于 Dev

狄更生

我正在使用同时使用ngrx / store 1.5和thunk中间件的应用程序，并且我正尝试移至ngrx / store 2.0和ngrx / effects。关于如何处理多个相关的动作和/或效果，我有几个问题。

我意识到，重击与特效之间的“思维定势”是不同的，我正在努力弄清这些差异。我浏览了可用的示例应用程序，但没有找到任何适合我尝试的内容，因此也许我仍然完全错误地采用它。

场景1

这是处理向服务器发出登录请求的副作用：

@Effect login$: any = this.updates$
    .whenAction(LoginActions.LOGIN)
    .map(toPayload)
    .switchMap(payload => 
        this.loginService.login(payload.user, payload.password)
            .map(result => this.actions.loginSuccess(value))
            .catch((error) => Observable.of(this.loginError(error)))
));

考虑到最初的副作用，成功登录后触发导航到“主”屏幕的“正确”或“建议”方式是什么？这也可以概括为简单地触发一系列动作或操作。

我考虑过的一些选择：

（a）由登录成功触发的另一个效果，它会触发后续操作来触发导航吗？

@Effect navigateHome$: any = this.updates$
    .whenAction(LoginActions.LOGIN_SUCCEEDED)
    .mapTo(this.actions.navigateHome());

（b）由登录成功触发的另一种效果只是执行导航操作？

@Effect navigateHome$: any = this.updates$
    .whenAction(LoginActions.LOGIN_SUCCEEDED)
    .do(this.navigateHome())
    .filter(() => false);

（c）将额外的动作与最初的登录效果所发出的动作串联起来？（样本显然不是很正确，但是给出了主意）

@Effect login$: any = this.updates$
    .whenAction(LoginActions.LOGIN)
    .map(toPayload)
    .switchMap(password => Observable.concat(
        this.loginService.login(passcode)
            .map(result => this.actions.loginSuccess(value))
            .catch((error) => Observable.of(this.loginError(error))),
        Observable.of(this.actions.navigateHome())
    ));

（d）其他？

方案2

考虑一种情况，在这种情况下，需要按顺序进行多个请求，并且在每个请求开始时，我们都希望更新“状态”，以便可以将反馈提供给用户。

遵循这些思路进行重击的示例：

multiphaseAction() {
    return (dispatch) => {
        dispatch(this.actions.updateStatus('Executing phase 1');
        this.request1()
            .flatMap(result => {
                dispatch(this.actions.updateStatus('Executing phase 2');
                return this.request2();
            })
            .flatMap(result => {
                dispatch(this.actions.updateStatus('Executing phase 3');
                return this.request3();
            })
            ...
    }
}

再次，使用效果方法进行此操作的“正确”或“建议”方法是什么？

我更坚持这一点，除了添加某种.do(this.store.dispatch(this.actions.updateStatus(...))方式外，我不确定是否可以做些其他事情...

莱昂·雷德利

导航方案的答案是您的b答案

@Effect navigateHome$: any = this.updates$
    .whenAction(LoginActions.LOGIN_SUCCEEDED)
    .do(this.router.navigate('/home'))
    .ignoreElements();

说明：您对LOGIN_SUCCESS做出反应，并且由于路由器未返回新动作，因此我们需要停止流的传播，这是通过过滤所有内容来完成的。

如果您忘记过滤，路由器将返回未定义值，这将导致reducer减少未定义值，当它尝试读取type动作的值时，通常会导致返回空指针

解决它的另一种方法是使用https://github.com/ngrx/router-store

查看有关如何将路由器存储添加到您的应用程序的文档。

现在，相同的效果将如下所示。

import { go } from '@ngrx/router-store';

@Effect navigateHome$: any = this.updates$
    .whenAction(LoginActions.LOGIN_SUCCEEDED)
    .map(() => go(['/home']));

该go动作将调度路由器动作，路由器减速器将接听并触发路由更改。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。