解析程序或保护程序-更适合使用ngrx

时间:2019-03-22 02:50:18

标签: angular ngrx ngrx-store

我想使用Angular和ngrx导航到一条路线,并确保在ngrx / store中有所需的数据。我正在使用ngrx / store action / effect / reducer实际调用API。路线正在加载的组件会通过商店访问数据,因为系统的其他部分可能会更新数据。

如果无法加载数据,则会调度LOAD_FAILED操作,可以通过多种方式进行处理。

我应该使用守卫还是分解器?每种方法还有哪些其他利弊?您尝试了什么,如果再次有时间,会以同样的方式进行吗?以下是我的一些想法。

选项1:后卫

访问路由时,后卫的canActivate检查数据是否在存储中,如果没有,则从API加载数据并将其添加到存储中。如果数据无法加载,则canActivate将返回false(作为可观察的结果)。

这种方法的缺点是“加载数据不应该由警卫负责”,但是如果无法加载数据,则具有阻止访问的优势,并且路由器可以处理掉“找不到”的问题,两者都在职责范围之内。

选项2:解析器

当访问路由且任何其他防护措施都允许激活时,将调用解析程序。此解析器检查数据是否在存储中,如果不存在,则触发LOAD操作,以从API加载并添加到存储中。然后,一旦数据被加载,解析器将返回一些任意数据,当组件使用存储时,路由/组件将丢弃这些数据。如果数据加载失败,某些内容将重定向到未找到的页面

此方法的缺点是未按传统意义使用解析器,例如它返回的数据将被丢弃。此外,解析器在找不到时需要重定向到404,或者LOAD_FAILED需要重定向。这会增加复杂性,因为有时LOAD_FAILED不应重定向,例如当后台操作触发加载时。从好的方面来说,解析器负责加载数据。

2 个答案:

答案 0 :(得分:1)

在我的项目中,我们使用NgRx存储,并使用Guards来获取数据。这种方法各有利弊,但是从我的角度来看,解析器不太适合这种类型的数据处理,而Angular缺少其他一些类,例如PreloadingGuard(或其他类似的东西),这两种方法之间可能存在隔guard和解析器-将负责获取数据,但不会访问路由。让我们列出什么是利弊:

缺点:

  • 获取数据不是卫队的责任,这违反了他们的定义

优点:

  • 在实际完成重定向之前,必须将数据保留在存储区中-这是“必须的”。有人会说我们可以在组件顶部使用* ngIf,但是从最终用户的角度来看,它看起来很奇怪:您在A页上,单击按钮,然后页面为白色(顶部可能还有一些微调器),突然内容出现,您就在B页上。有了警惕,我们没有“白页”部分-一切都很顺利而且很好。

  • 如果使用了防护功能,但无法获取数据-用户未重定向到其他路由,则他/她将停留在先前的位置。对解析器执行相同操作-用户挂在中间的某个地方,原因是他已经将他移到了其他路线,并且我们需要一些其他代码才能将他移回到他刚去过的地方。

  • 通常,您会希望异步获取数据。您将编写诸如LoadSth,LoadSthSuccess,LoadSthError之类的操作。使用后卫,您不需要任何效果,也不需要3个动​​作(LoadSthSuccess就足够了)。您可以在守护中调用服务,然后调度LoadSthSuccess操作。就我个人而言,我仅在需要时才使用效果器-这些野兽非常棘手,我强烈建议避免尽可能多地使用它们。后卫只是更好的替代者。

  • 使用Guards可以更好地处理错误。您基本上不希望用户看到损坏的页面(数据不完整)。警卫队将帮助您实现这一目标-显示一些错误模式并从警卫队返回Observable.of(false)+保留先前的视图

  • 您可以在多个位置使用相同的防护,并且仅在状态为空时才获取数据-因此,您可以确保仅加载一次数据,并且可以确保在访问某些路由时实际上已加载了数据

答案 1 :(得分:0)

我认为在您的情况下,您可以选择使用Guards或Resolver。

我个人认为解析器更适合于预取数据。我看不到数据被丢弃的问题。您还可以向最终组件提供一些有关数据检索的有用信息(例如,如果数据仅部分可用)。

在Resolver中进行重定向的弊端,我并不真正理解您的意思。我相信没有这种问题,您可以按照Angular guide中的说明在Resolver中处理重定向。在获取失败的基本情况下,路由事件将被取消,并且用户将保留在当前页面上。

如我所见,使用Guards的唯一真正优势是您能够在队列中执行它们。它可能允许您创建更通用且可重用的Guard类,其中每个Guard负责检索特定的数据位。另一方面,解析程序更特定于路由而不是特定于数据。

相关问题