问题标签 [ngrx-effects]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
2486 浏览

redux - 在效果失败/错误的情况下阻止路由器导航

我正在迁移以使用ngrx 效果,但我遇到了以下问题:由于dispatch返回void我不确定如果我的 ngrx 效果(例如 from this.userAccountService.updateFirstName(...)发生错误,如何防止路由器导航。

从我的组件类:

从我的效果类:

我不确定使用路由器从效果中导航是否是一种好习惯(甚至可能)。

如果我的效果发生错误,有人可以建议一个干净的解决方案来防止路由器导航吗?

0 投票
2 回答
672 浏览

javascript - 带有ngrx,AlertController,LoadController问题的Ionic 2

请原谅我的无知,我对反应性概念相当陌生。

我的问题是不知道如何根据商店当前状态加载 Ionic 2 加载程序或 Ionic 2 警报。

通过订阅它正在响应的存储切片,我已经能够实现我需要的加载器行为。尽管当涉及到警报(在捕获的错误时引发)时,它永远不会在订阅块中触发。

任何帮助指出更好的方向,或者我错过了什么,将不胜感激。

此代码来自登录模式视图。

影响

服务

减速器

店铺

0 投票
2 回答
900 浏览

angular - 在 Angular 2 中使用 ngrx/store 和 ngrx/effects 进行状态管理

我正在开发一个示例 Angular 2 应用程序,我计划使用 @ngrx/store 和 @ngrx/effects 进行状态管理。

这个示例应用程序有一个根模块和多个功能模块。

现在我的问题是。

  1. 我可以在我的所有功能模块中导入 StoreModule 和 EffectsModule 还是应该在根模块中只导入一次?

  2. 为了在模块中导入单个效果文件,我在模块文件中的代码行下面编写了

    如果有多个效果文件怎么办?

0 投票
1 回答
700 浏览

angular - Angular 2 ngrx/store calling an Observable service call on the result of another Observable service call

I'm trying to learn and understand Rxjs and ngrx/store

I have two api calls, the first one gets me an array of character names, the second one gets me the inventory of a character.

How do I run the second function through the array returned by the first one, using ngrx/store action/reducers/effects?

This are the service functions:

These are the actions:

This is the reducer:

And this is the effect I tried using:

0 投票
0 回答
34 浏览

javascript - 需要来自自己 API 的数据的子组件

我有一个父组件(代表当前 URL)和三个子组件。每个组件都需要做一个 API 请求来获取它需要的数据。

我最初的解决方案是在父节点中订阅路由参数,然后调度一个被三个效果(每个组件一个)捕获的动作,这些效果将执行 API 调用,最后三个减速器将存储响应。

这是最好的方法还是有更合适的方法?

0 投票
1 回答
2523 浏览

angular - Angular2 NGRX 调度时的性能问题?

我一直在 Angular2/CLI/NGRX 中开发一个应用程序,直到最近一切都进展顺利。我注意到性能出现了一些相当大的峰值,尤其是在同一容器内连续调度的情况下。

例如,假设我定义了以下内容:

还值得注意的是,以上是加载子组件所需的所有状态选择以及它们在多个组件之间共享的数据(因此是 .share()),例如:

初始负载很大并且运行良好。我的冻结状态处于活动状态,并且该状态内没有发生任何突变。所有组件也都在使用 OnPush 策略。

问题出在中心内容组件中,我有一个与容器组件对话的事件发射器。它将一个对象发送到“选择”,并通过调度程序触发一个操作以使用所选选项更新状态。前几次单击运行良好,然后您开始注意到一些严重的功耗,因为您继续单击整个子组件的不同区域。就好像调度员似乎陷入了困境。

我尝试了一些方法,例如使用 combineLatest() 和其他工具来减轻更新的负担,但这似乎让事情变得更糟。目前应用加载数据的方式如下:

还有其他人遇到性能问题吗?它与 NGRX 以及我的设置方式无关吗?我主要使用 NGRX 示例应用程序作为如何布置我的设置的参考点。

编辑

这是我遇到的问题的时间线表示。就好像点击事件正在成倍增长?

时间线

编辑 2

我正在使用重新选择,这是后续点击后挂起的页面的效果:

0 投票
1 回答
8243 浏览

angular - ngrx 链接操作/效果 - 例如登录然后导航

我是 ngrx 和 Redux 风格架构的新手,我在理解应该如何链接动作/效果时遇到问题。一个例子是实现基本功能,例如在用户登录后采取行动。我在这里的核心问题是用户登录后要采取的行动将根据应用程序的当前状态而有所不同——用户可能在任何地方在应用程序中出现登录提示/页面时。

我见过的任何示例都会在用户登录后发生硬编码效果。在我的场景中,如上所述,这不太适合我并不总是希望发生相同的操作。

这是包含登录组件的主页的一些示例代码。在这种情况下,我希望用户在登录后被重定向到“/购买”。

示例效果

我对如何解决这个问题有几个想法——但没有一个感觉是对的。这些包括

  • 使用登录有效负载传递数据以确定下一步要采取的操作
  • 编写许多在 LoginSuccess 时采取行动但在更高级别过滤的效果
  • 通过监听商店中的事件来编写特定于组件的效果(这可能/不好的做法吗?)
  • 从存储中读取有关当前登录状态的数据并在组件中对此进行操作。但是,此逻辑将立即运行,这可能不会产生预期的效果

谁能指出我正确的道路/提供如何解决此问题的示例?

0 投票
2 回答
1866 浏览

angular - 使用 ngrx/store 时多次分派

我正在开发一个示例 Angular 2 应用程序,并使用 ngrx/store 、 ngrx/effects 进行状态管理。

下图描绘了我的应用程序的屏幕之一。

在此处输入图像描述

为了显示来自服务器的书籍列表、类别和作者,对商店进行了以下调度调用。

下面是相关的效果

我的问题是

  1. 上述方法是正确的还是有更好的方法,由于某种原因,有时书籍列表会显示第二次,然后它们就会消失。

  2. 如果我的理解是正确的,以上三个调度是并行发生的,如果我需要它们一个接一个地发生怎么办。

0 投票
1 回答
212 浏览

javascript - 如果组件在页面上,Ngrx 更新减速器

我在一个页面上有两个组件,一个更新用户表单和一个事件历史记录。它们由两个 reducer(用户和事件)表示。一旦用户更新,我想更新商店中的事件列表(通过调用 API)。但是,仅当事件组件在页面上时才应更新事件。

实现这一目标的最佳方法是什么?我喜欢这个想法的唯一解决方案是在表单/事件组件的父级中有一个成功处理程序,它调度一个被效果捕获的动作,然后刷新事件列表。我希望这是我可以完全通过效果实现的东西,但我显然不知道该组件是否在页面上,并且我还需要访问路由参数。有没有人有更好的解决方案或者可以看到这个解决方案的问题?

0 投票
6 回答
12449 浏览

angular - 如何使用 Angular 路由器防护装置附加 ngrx/store

我是 ngrx/store 的初学者,这是我第一个使用它的项目。

我已经成功地使用 ngrx/store 设置了我的 Angular 项目,并且在初始化我的主要组件后,我能够调度加载操作,如下所示:

ngOnInit() { this.store.dispatch({type: LOAD_STATISTICS}); }

我已经设置了一个效果来在分派此操作时加载数据:

我的减速器看起来像这样:

虽然这可行,但我无法理解如何将它与路由器防护一起使用,因为我目前只需要调度 LOAD_ACTION 一次。

此外,一个组件必须调度一个 LOAD 动作来加载初始数据对我来说听起来不正确。我希望商店本身知道它需要加载数据,而我不必先调度动作。如果是这种情况,我可以删除组件中的 ngOnInit() 方法。

我已经研究了 ngrx-example-app 但我还没有真正理解它是如何工作的。

编辑:

添加返回 ngrx-store observable 的解析保护后,路由不会被激活。这是解决方法:

这是路线: