ngrx 效果：由一个效果调度的动作是否立即被其他效果处理？

Question

我有一个具有四个 ngrx 操作的 Angular (2) 应用程序：

• 开始
  • reducer 未处理（无状态更改）
  • ngrx Effect 调用异步任务并映射到 SUCCESS 或 ERROR
• 成功
  • 由reducer处理
  • ngrx 效果映射到 ADVANCE
• 高级
  • reducer 未处理
  • ngrx 效果导航到不同的路线
• 错误
  • 由reducer处理
  • 没有效果

问题在于，捕获 ADVANCE 的 Effect 似乎在处理 SUCCESS 的 reducer 之前运行

这是效果代码：

@Effect() start$ = this.actions$
    .ofType('START')
    .map(toPayload)
    .switchMap(input => doAsyncTask(input)
        .map(result => ({type: 'SUCCESS', payload: result}))
        .catch(error => ({type: 'ERROR', payload: error})));

@Effect() success$ = this.actions$
    .ofType('SUCCESS')
    .map(() => ({type: 'ADVANCE'}));

@Effect({dispatch: false}) advance$ = this.actions$
    .ofType('ADVANCE')
    .withLatestFrom(this.store$.select(state => state.route))
    .map(action_route => action_route[1])
    .do(route => this.router.navigate([route.foo.bar]));

我得到的错误是Cannot read property 'bar' of null。 foo 属性由处理 SUCCESS 的 reducer 设置。

如果我为 SUCCESS 效果添加延迟，一切都会很好：

@Effect() success$ = this.actions$
    .ofType('SUCCESS')
    .delay(1)
    .map(() => ({type: 'ADVANCE'}));

但必须添加此延迟对我来说没有意义。

我在各处添加了console.log 语句，输出如下所示：

1. 成功效应
2. ADVANCE 效果（显示 route.foo === null）
3. SUCCESS reducer（显示 route.foo === 某些东西）
4. 错误

我预计 SUCCESS 效果和 SUCCESS reducer 在 ADVANCE 效果之前运行。

我做错了吗？

期望reducer 以与调度相同的顺序处理动作是不正确的吗？

---

版本：

• @angular/cli: 1.0.0-beta.32.3
• 节点：7.5.0
• 操作系统：darwin x64
• @angular/common: 2.4.7
• @angular/编译器：2.4.7
• @angular/core: 2.4.7
• @angular/forms: 2.4.7
• @angular/http:2.4.7
• @angular/platform-b​​rowser: 2.4.7
• @angular/platform-b​​rowser-dynamic: 2.4.7
• @angular/路由器：3.4.7
• @angular/cli: 1.0.0-beta.32.3
• @angular/compiler-cli: 2.4.7
• @ngrx/core@1.2.0
• @ngrx/effects@2.0.0
• @ngrx/store@2.2.1
• rxjs：5.1.1

Answer 1

回答你的结论性问题：

• 我做错了吗？

• 不，我不认为你做错了什么。

• 期望reducer 以与分派相同的顺序处理操作是否不正确？

• 这个顺序看起来合乎逻辑，但显然你现在不能指望它

似乎有一个错误导致了这种行为。您很可能正在经历它，因为您直接映射到另一个动作。通常，如果你有一个异步操作或类似的操作，reducer 有时间在监听下一个动作的效果开始之前完成。

也许不是您问题的一部分，但您指定问题的解决方案是在有效负载的帮助下直接在成功中导航到您的新路线，或将有效负载传递给 ADVANCE。

以下链接是与您的相关的效果项目、商店项目和 rxjs 项目中报告的问题：

• https://github.com/ngrx/effects/issues/58
• https://github.com/ngrx/store/issues/279
• /ReactiveX/rxjs/issues/2155（声誉太低，无法链接到这个）

他们似乎正在努力:)

Answer 2

用 .concatMap 替换 START 操作的捕获中的 .map 并将您的地图放到 SUCCESS 和 ACTION 那里可能会起作用。

@Effect() start$ = this.actions$
    .ofType('START')
    .map(toPayload)
    .switchMap(input => doAsyncTask(input)
        .concatMap(result => {
            return Observable.from([type: 'SUCCESS', payload: result,
                                    type: 'ADVANCE'])
        .catch(error => ({type: 'ERROR', payload: error})));

Answer 3

ngex/effects 的目的是在基于 redux 的环境中充当中间件。

所以你在这里基本上做的是调用“成功”动作，它应该在减速器上工作并继续另一个动作是中间件。但这就是 effecs 的辅音，它应该拦截动作并自己处理，只有在异步处理之后才调度动作。

那么这里发生了什么？您将成功发送到两个不同的地方，一个应该由减速器处理，一个由中间件处理。我不确定它是否总是这样，但中间件会在到达减速器之前拦截传入的动作。我认为，如果您稍微修改一下代码，它应该可以工作。尝试做类似的事情：

@Effect() start$ = this.actions$
    .ofType('START')
    .map(toPayload)
    .switchMap(input => doAsyncTask(input)
        .map(result =>{
               this.store$.dispatch(
               {type: 'SUCCESS',
                payload: result
                });
               this.store$.dispatch(
               {type: 'ADVANCE'})

}

        .catch(error => ({type: 'ERROR', payload: error})));

你看到我在这里做什么了吗？我已经删除了拦截“成功”的中间件，所以“成功”不会击中减速器。在它发送另一个类型为“advance”的操作之后，该操作应该在“成功”处理完毕后触发您的中间件。

希望对您有所帮助。