问题标签 [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.
angular - NGXS 存储插件和延迟加载状态
在我的公司,我有一个非常复杂的应用程序结构。我们正在使用 NX Workspace 开发 3 个应用程序,这些应用程序都具有共享模块。
我们的应用程序结构看起来像这样:apps -->app1 -->app2 -->app3
libs --> 具有组件和 ngxs 状态的身份验证模块 --> 具有组件和 ngxs 状态的其他共享模块
我们所有的库都被延迟加载到每个需要它的应用程序中。
所以我遇到的问题是 ngxs 存储插件。似乎必须将它导入每个应用程序模块,如果您不指定密钥,那么它将每个状态转储到本地或会话存储中(我们正在使用会话存储)。如果没有添加路由器状态,这对我来说会很好。
似乎当路由器状态处于会话存储中时,当您尝试通过在 url 栏中手动键入链接来导航到另一个页面时,它会将您重定向回路由器导航到的上一个页面。
我四处搜索,似乎每个人都建议您不要将路由器存储在会话存储中。如果有其他解决方法请告诉我!
如果没有解决路由器问题的方法,那么这就引出了我的下一个问题/问题。我希望能够将状态单独添加到存储中,但我也希望将该代码与状态所属的模块一起保留,而不必将其添加到每个应用程序的 AppModule 中。我们将拥有一个非常大的应用程序,并且必须从我们每个应用程序中的所有库中映射每个状态将令人筋疲力尽。
存储插件没有 forFeature 选项,但是否考虑过像我这样的复杂应用程序?
我可以在 github 上提出一个关于它的问题,但想在这里与社区联系,以确保那里没有我缺少的解决方案。
javascript - NGXS 状态不变
可能有人知道为什么 NGXS 状态不能在 HttpClient POST 请求中改变。
仅适用于 HTTP POST 请求之外。
angular - 从状态中抽象选择器和动作处理程序
我想知道是否可以将@State 类中的@Selectors 和/或@Action 处理程序抽象到一个单独的文件中?随着状态越来越大并且选择器越来越复杂,我想将它们移动到一个单独的文件中以保持状态类更干净。NGXS有什么办法吗?
编辑:为了将来参考,我在 NGXS 松弛频道上得到了答案,这确实是可能的。我们可以创建一个单独的选择器类来存储我们所有的选择器,将感兴趣的状态作为参数传递给它们。
到目前为止,我还没有弄清楚如何为动作处理程序做同样的事情,但是将选择器提取到一个单独的文件中已经清理了很多状态类!
unit-testing - ngxs:如何测试动态选择器
我遵循了有关测试 ngxs 选择器的官方文档(https://ngxs.gitbook.io/ngxs/recipes/unit-testing#testing-selectors),但是它没有涵盖如何对使用createSelector
.
我的普通选择器只是将状态作为参数获取,因此我可以通过传递准备好的状态并比较输出来轻松测试它。
我的动态选择器如下所示:
它获得的唯一参数是它选择的 id,而不是状态。状态是通过将其指定为第一个参数自动传入的,createSelector
我不知道应该如何测试这个选择器。
ngxs - NGXS/Store Action 命名可重用性
在官方文档中,建议我们将[]
Action 的来源放在括号内:
名称应包含三个部分:
关于命令来自何处的上下文,[用户 API]、[产品页面]、[仪表板页面]。
描述我们想对实体做什么的动词。
我们正在操作的实体,用户、卡、项目。
例子:
[用户 API] 获取用户
[产品页面] AddItemToCart
[仪表板页面] ArchiveProject
但是,如果我们调用 Action 的位置有 2 个不同的位置怎么办?
在我的 Angular 应用程序中,我有以下操作:
我如何命名这个,所以我强调ClearActiveItem
可以从其他地方发送而不是Items Page
?
angular - 在模板中使用 ngxs observable select 属性
我刚刚开始使用 Angular 6,所以我提前为这可能是一个非常简单的问题道歉。我也刚刚开始研究使用ngxs
状态管理。
@Select
我在我的组件上从我的状态获得了一个Observable 属性。
我的问题是,我如何isLoading
在组件模板中实际使用?在模板中使用可观察状态属性的一般模式是什么?我应该订阅 observable 并将值映射到组件上的另一个属性,还是有办法在模板中使用 Observable?
当然,如果它只是一个直线上升boolean
,我可以像*ngIf="isLoading"
在模板中一样使用它。
angular - NGXS:测试一个动作
我对 angular 和 ngxs 非常陌生,我正在编写一个小型消息服务,以便有机会通过连接到 firebase 的 ngxs 商店发送和接收消息。
我正在尝试为发送消息的方法编写测试。由于我并没有真正与官方 ngxs 测试文档相处,因此我遇到了一些问题。
所以我目前(不工作)对该测试的尝试是:
随着 TEST_STATE 是
运行测试,我得到错误Failed: States must be decorated with @State() decorator
。
如何正确使用 TEST_STATE 作为我的测试状态AddMessage
?我的调度和选择应该是什么样子?
正如我所说,我是 ngxs 和测试的新手,如果我的代码不太好,我很抱歉。谢谢你的帮助!
angular - 如何避免 NGRX 或 NGXS 中的循环
我有一个像user-personal-details.component.ts
. user
与存储的保持同步Store
该组件有一个表单来填写有关user
. 没有保存按钮,每次用户输入任何这些组件时,我都会通过以下方式检测更改
并派发一个Action
命名UpdateUser
来存储更改Store
。
问题:
问题是当用户输入一些东西时,它会发送动作来改变商店中的用户(B 行)。由于user
在 store中订阅了组件,因此将再次调用Line A。反过来,修补表单,因此调用Line B。从而使其成为一个循环。
避免这种情况的一种方法是在表单更改时改变状态,因为这不会触发操作,因此不会调用 B 行。但我认为 Redux 不建议这样做。
有人可以提出一种更优雅的方法来处理这个问题吗?
注意:我为此使用 NGXS,但我想它不应该有所作为。
编辑:由于这个问题被否决了,我对这个问题进行了很大的编辑,以使问题最小化。
typescript - 如何为 ngxs 动作实现 Debounce 模拟?
我有搜索输入:
当用户键入时,它会在每次模型更改后调用 projectFilter 函数。
如何使用 ngxs 实现 Debounce?
例如,仅在用户完成输入后 0.5 秒后才发送操作?