问题标签 [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 回答
431 浏览

firebase - Angular 6、NGXS 和 Firestore

我有一个 Firestore 数据库,它的集合排列类似于关系数据库,相关集合存储外键。做出此决定是为了更轻松地与现有 .Net 服务集成,并提供更大的灵活性。

这是数据模型的一部分:

在此处输入图像描述

我已将我的状态拆分为功能模块,并具有如下代码:

在 ScheduleListComponent 中,我有以下代码:

我可以将 getSchedulesById$ 的检索逻辑移动到状态类中,但是我目前的代码结构方式是,我需要一种为每个 ScheduleGroup 检索 Schedules 的方法;因为 ScheduleGroup 被迭代并检索每个组的 Schedules 以进行显示。这可以在以下模板片段中看到:

这段代码有效,但看起来很冗长。有没有更好的方法来做到这一点?

我遇到的问题之一是,即使是简单的组件最终也会变成容器。以 ScheduleListComponent 为例,它需要显示来自相关表的数据。获取此数据取决于在 *ngFor 迭代期间哪个特定的 Schedule 项处于焦点。

有什么改进的建议吗?我几乎可以肯定有更好的方法,但我不确定它是什么。

另外,这里是数据服务:

我知道这项服务可以改进,我会开始这样做,但我想我会为了完整起见将它包括在内。

任何改进建议将不胜感激。

0 投票
3 回答
2822 浏览

angular - Ngxs - 调用 Angular 服务:好的做法?

当我使用ngxs我的应用程序应该做什么时:

  • 我的组件调用一个服务并且该服务以结果作为有效负载分派一个动作?
  • 我的组件调度了一个动作,而我的状态调用了该服务?
0 投票
1 回答
1113 浏览

redux - NGXS state size and performance

I'm impressed with the redux-like pattern in Angular, and I'm hooked into NGXS (I compared this with NGRX and Akita, but opted for NGXS).

I'm aware that NGXS stores all the previous states within the application, so if I've a very complex UI, with tons of grid manipulations, etc which on each action adds a new state, won't the global state object becomes 'very large' and bulky with the entire hierarchy of the previous states ?

Is there a performance issue with this as the application gets complex and complex ?

0 投票
1 回答
334 浏览

angular - Angular 7、NGXS 和 Firestore:冗余问题

目前,我从 Firestore 获取数据,然后将其修补到状态中。我也使用 NGXS 存储插件。

这一切都有效,但似乎是多余的。

当我获取状态时,我使用常规和加入的@Selectors 的组合。这意味着我没有利用 Firestore 查询选项,我的代码最终在大小和复杂性方面变得臃肿。

当使用带有 enablePersistence 的 Firestore 时,真的需要 NGXS 吗?

可以做些什么来简化架构?

提前致谢 :)

0 投票
1 回答
595 浏览

angular - Ngxs - 使用 api 的正确方式?

我想对 api 调用进行 3 个操作。GetItem、GetItemFailed、GetItemSuccess。

我对 rxjs 运算符不太熟悉,所以我只使用 subscribe 进行 api 调用。

像这样的东西:

我做了一些谷歌搜索 ngxs 示例,发现大多数人使用带有 tap/take/first 的管道,因此我将操作中的 subscribe 重构为如下内容:

它起作用了,但是当我检查 redux 开发工具时,GetItemSucess 在 GetItem 之前首先被触发。

谁能告诉我在成功/失败的情况下调用 api 的正确方法。似乎无法在网上找到一个很好的例子。

0 投票
2 回答
4967 浏览

angular - 使用 NGXS 订阅操作流的更简洁方式

所以我通常有一个方法可以在点击时调度一个动作:

此代码触发以下场景并根据请求是否失败分派 CreateSuccess 或 CreateFailed

现在在我调用的组件内部,create()我正在监听这两个动作。

这一切都完美无缺,唯一困扰我的是每次我使用它时,我都必须添加 takeUntil() 部分,以便在组件被销毁时取消订阅。

我知道这对每个人来说可能都不是一个真正的问题,但我想知道是否有更清洁的方法来做到这一点。

我已经考虑过可以处理此问题的自定义 RxJS 运算符,但也许还有其他选项,或者(我还没有找到任何东西),NGXS 是否有办法自行取消订阅?

0 投票
1 回答
593 浏览

angular - NGXS <-> Angular: 2-Way 绑定

我想同步 ngxs-form-plugin 填充的 2 个表单字段。

如果我更改输入字段#1,存储会同步,但输入字段#2 仍然具有旧值。输入字段#2 也是如此

是否有使用 Reactive-Forms 使它们保持同步的 ngxs 方式?

代码示例:Stackblitz.com

0 投票
1 回答
174 浏览

ngxs - NGXS 状态文档

我是 NGXS 的新手,我正在尝试完全理解这些文档,这样我就可以在知道自己在做什么的情况下开始使用它。

在此处的此代码段中,我有一件事我不明白。

就在这段代码下面,它说:

你可能会注意到我返回了 Observable 并且只是轻点了一下。如果我们返回 Observable,框架会自动为我们订阅它,所以我们不必自己处理。此外,如果我们希望 store dispatch 函数只有在操作完成后才能完成,我们需要返回它以便它知道。

框架将订阅this.animalService.feed,但为什么呢?

0 投票
1 回答
1453 浏览

angular - Angular 6 中的 RXJS 仅返回 { "_isScalar": false }

我是RXJS第一次尝试。尽管我正在按照我在教程中找到的步骤进行操作,但实际上我的组件并没有得到满足,Store而是得到了 object { "_isScalar": false }

这里的代码:

组件 HTML:

组件 TS:

PS:我检查了状态文件并意识到状态正在正确更新。接收组件仍然无法获取数据,而是获取上述对象。

0 投票
1 回答
1246 浏览

ngxs - 测试 ngxs 状态类

您将如何以角度测试这个状态类?可能有或没有测试床。您是否必须创建测试平台并提供默认状态?任何帮助将不胜感激。谢谢