第1部分:突出角当使用形式的一个常见的场景

尼古拉斯·坎宁安

·

遵循

4分钟阅读

·

2018年9月9日

- - -

3

听

分享

这是3的第1部分,我们强调一个常见的场景角当我们使用形式,尤其是自动保存。

• 第1部分:突出情况和处理它RxJS。
• 第2部分:增强NgRx。
• 第3部分:划分和简化Nx。

现在,这只会突出一个非常小的用例,使用ngModel,但它可以应用到非常复杂的反应形式和模板驱动的形式。

这种情况

假设有一个文本区域的评论和一个按钮,进入不同的页面查看你所有的评论。

评论时得到更新文本区域触发一个模糊事件。这意味着当用户集中在另一个元素时,我们将保存当前文本区域价值。

这是一种幼稚的方法自动保存功能。

如果你意识到在这个阶段,会发生什么荣誉!

如果不是,继续阅读。

开发人员通常认为客户会经历相同的速度和响应时间,因为他们在他们的开发环境。

这个问题

为什么这是一个竞争条件或有什么问题吗?

我们假设:

1. 需要1到3秒拯救你的评论到数据库。
2. 需要一半一秒从数据库中检索所有的评论。
3. 需要一个微不足道的两页之间移动的时间。

现在,如果一个用户类型的评论,点击进入下一个页面没有故意点击其他地方以确保评论保存,通常情况下,用户将体验比赛条件下,特别是在蜂窝网络。

当竞态条件帖子调用保存新创建的评论仍在空中,在用户在查看第二页的评论。

在一个正常的开发环境,这一点可能像预期的那样工作。此外,这通常是发现在开发周期的后期和复杂的业务逻辑,等等。

处理竞争条件

现在,有很多方法可以处理这件事,有或没有RxJS。

然而,这种方法将使用RxJS角非常普遍的生态系统。其API与我们想要达到一种共生关系。

我谈论哪个API呢?我们将使用的混合物fromEvent,推迟,延迟,mapTo,concatMap运营商,只是仅举几例。

如果您是RxJS,我建议阅读材料从这些伟大的作者:

• Netanel基底
• 本Lesh

运营商的解释

我们使用FromEvent运营商对我们处理文本区域的模糊这样我们可以叫我们的事件saveComment函数在组件内部文件。

我们也使用FromEvent操作符来处理点击从我们的按钮事件。

我们使用推迟因为fromEvent运营商希望,使可见热。我们这样做,当组件加载,模板参考尚未初始化。将会有一个错误,因为这将是未定义的。

当我们在订阅ngAfterViewInit,我们可以和参考推迟允许我们这样做。

所以,简而言之,推迟热的冷。

我们使用延迟因为我们要确保我们的指定事件运行第一如果他们都解雇了。当你看到实现这将变得更清楚。

我们使用mapTo我们知道如何区分事件处理它们进一步连锁运营商。

现在,concatMap运营商基本上可以暂停所有传入的请求而前一个请求仍然活跃。

更新

我们已经做了一些修改模板。正如我前面说的,现在我们将处理事件在我们的组件,而不是把他们的模板。

然后,我们将可见。

详细报道的

从我们有一些变化。事实上,现在我们的模板看起来更干净。

那么,到底发生了什么?

当我们的文本区域已经发射了模糊事件,它应该表现得像以前一样。

它将:

1. 现在被称为从可观察到的。
2. 的mapTo将会改变它一个这样concatMap运营商知道如何处理它;这就像一个标识符。

另外…

如果模糊事件触发单击事件触发,比如当用户键入文本区域,并立即单击按钮时,它将导致这一场景。

而不是希望模糊事件序列完成时间,这样,当用户导航时,他们看到更新后的列表,我们现在:

1. 确保,如果他们都叫,单击调用将等待50在继续之前。
2. 而点击呼叫等待模糊,调用将会到concatMap。
3. 当单击调用完成等待和希望进入concatMap而模糊事件仍在飞行中,它会等待,直到它完成才可以导航,的本质concatMap。

完整的解决方案

重要的

尽管看起来像我用一长串的运营商,重要的是要知道这是一个特别的方法,必须对每一个重复的内部应用程序。

请继续关注我们使用NgRx更新这个解决方案。

我有一个StackBlitz例子也即将到来。