问题标签 [ngxs]

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 投票
1 回答
1296 浏览

angular - NGXS 存储插件和延迟加载状态

在我的公司,我有一个非常复杂的应用程序结构。我们正在使用 NX Workspace 开发 3 个应用程序,这些应用程序都具有共享模块。

我们的应用程序结构看起来像这样:apps -->app1 -->app2 -->app3

libs --> 具有组件和 ngxs 状态的身份验证模块 --> 具有组件和 ngxs 状态的其他共享模块

我们所有的库都被延迟加载到每个需要它的应用程序中。

所以我遇到的问题是 ngxs 存储插件。似乎必须将它导入每个应用程序模块,如果您不指定密钥,那么它将每个状态转储到本地或会话存储中(我们正在使用会话存储)。如果没有添加路由器状态,这对我来说会很好。

似乎当路由器状态处于会话存储中时,当您尝试通过在 url 栏中手动键入链接来导航到另一个页面时,它会将您重定向回路由器导航到的上一个页面。

我四处搜索,似乎每个人都建议您不要将路由器存储在会话存储中。如果有其他解决方法请告诉我!

如果没有解决路由器问题的方法,那么这就引出了我的下一个问题/问题。我希望能够将状态单独添加到存储中,但我也希望将该代码与状态所属的模块一起保留,而不必将其添加到每个应用程序的 AppModule 中。我们将拥有一个非常大的应用程序,并且必须从我们每个应用程序中的所有库中映射每个状态将令人筋疲力尽。

存储插件没有 forFeature 选项,但是否考虑过像我这样的复杂应用程序?

我可以在 github 上提出一个关于它的问题,但想在这里与社区联系,以确保那里没有我缺少的解决方案。

0 投票
1 回答
1645 浏览

javascript - NGXS 状态不变

可能有人知道为什么 NGXS 状态不能在 HttpClient POST 请求中改变。

仅适用于 HTTP POST 请求之外。

0 投票
1 回答
922 浏览

angular - 从状态中抽象选择器和动作处理程序

我想知道是否可以将@State 类中的@Selectors 和/或@Action 处理程序抽象到一个单独的文件中?随着状态越来越大并且选择器越来越复杂,我想将它们移动到一个单独的文件中以保持状态类更干净。NGXS有什么办法吗?

编辑:为了将来参考,我在 NGXS 松弛频道上得到了答案,这确实是可能的。我们可以创建一个单独的选择器类来存储我们所有的选择器,将感兴趣的状态作为参数传递给它们。

到目前为止,我还没有弄清楚如何为动作处理程序做同样的事情,但是将选择器提取到一个单独的文件中已经清理了很多状态类!

0 投票
1 回答
942 浏览

unit-testing - ngxs:如何测试动态选择器

我遵循了有关测试 ngxs 选择器的官方文档(https://ngxs.gitbook.io/ngxs/recipes/unit-testing#testing-selectors),但是它没有涵盖如何对使用createSelector.

我的普通选择器只是将状态作为参数获取,因此我可以通过传递准备好的状态并比较输出来轻松测试它。

我的动态选择器如下所示:

它获得的唯一参数是它选择的 id,而不是状态。状态是通过将其指定为第一个参数自动传入的,createSelector我不知道应该如何测试这个选择器。

0 投票
0 回答
217 浏览

angular6 - NGXS - 使用 redux devtools 插件/记录器的 Angular 6 过滤表单操作

有没有办法防止使用 redux devtools 插件监视某些操作?

我注意到有一个过滤操作的选项,但我不确定在那里输入什么。方法名称和操作类型不起作用。

在此处输入图像描述

这主要是因为表单插件。它非常方便,但确实会通过多次调用(更新表单状态、更新表单脏等)污染操作列表和控制台

在此处输入图像描述

0 投票
1 回答
759 浏览

ngxs - NGXS/Store Action 命名可重用性

在官方文档中,建议我们将[]Action 的来源放在括号内:

名称应包含三个部分:

关于命令来自何处的上下文,[用户 API]、[产品页面]、[仪表板页面]。

描述我们想对实体做什么的动词。

我们正在操作的实体,用户、卡、项目。

例子:

[用户 API] 获取用户

[产品页面] AddItemToCart

[仪表板页面] ArchiveProject

但是,如果我们调用 Action 的位置有 2 个不同的位置怎么办?

在我的 Angular 应用程序中,我有以下操作:

我如何命名这个,所以我强调ClearActiveItem可以从其他地方发送而不是Items Page

0 投票
1 回答
826 浏览

angular - 在模板中使用 ngxs observable select 属性

我刚刚开始使用 Angular 6,所以我提前为这可能是一个非常简单的问题道歉。我也刚刚开始研究使用ngxs状态管理。

@Select我在我的组件上从我的状态获得了一个Observable 属性。

我的问题是,我如何isLoading在组件模板中实际使用?在模板中使用可观察状态属性的一般模式是什么?我应该订阅 observable 并将值映射到组件上的另一个属性,还是有办法在模板中使用 Observable?

当然,如果它只是一个直线上升boolean,我可以像*ngIf="isLoading"在模板中一样使用它。

0 投票
1 回答
2596 浏览

angular - NGXS:测试一个动作

我对 angular 和 ngxs 非常陌生,我正在编写一个小型消息服务,以便有机会通过连接到 firebase 的 ngxs 商店发送和接收消息。

我正在尝试为发送消息的方法编写测试。由于我并没有真正与官方 ngxs 测试文档相处,因此我遇到了一些问题。

所以我目前(不工作)对该测试的尝试是:

随着 TEST_STATE 是

运行测试,我得到错误Failed: States must be decorated with @State() decorator

如何正确使用 TEST_STATE 作为我的测试状态AddMessage?我的调度和选择应该是什么样子?

正如我所说,我是 ngxs 和测试的新手,如果我的代码不太好,我很抱歉。谢谢你的帮助!

0 投票
1 回答
931 浏览

angular - 如何避免 NGRX 或 NGXS 中的循环

我有一个像user-personal-details.component.ts. user 与存储的保持同步Store

该组件有一个表单来填写有关user. 没有保存按钮,每次用户输入任何这些组件时,我都会通过以下方式检测更改

并派发一个Action命名UpdateUser来存储更改Store

问题:

问题是当用户输入一些东西时,它会发送动作来改变商店中的用户(B 行)。由于user在 store中订阅了组件,因此将再次调用Line A。反过来,修补表单,因此调用Line B。从而使其成为一个循环。

避免这种情况的一种方法是在表单更改时改变状态,因为这不会触发操作,因此不会调用 B 行。但我认为 Redux 不建议这样做。

有人可以提出一种更优雅的方法来处理这个问题吗?

注意:我为此使用 NGXS,但我想它不应该有所作为。

编辑:由于这个问题被否决了,我对这个问题进行了很大的编辑,以使问题最小化。

0 投票
1 回答
680 浏览

typescript - 如何为 ngxs 动作实现 Debounce 模拟?

我有搜索输入:

当用户键入时,它会在每次模型更改后调用 projectFilter 函数。

如何使用 ngxs 实现 Debounce?

例如,仅在用户完成输入后 0.5 秒后才发送操作?