Queries 设计模式：优化 Angular 应用开发

Queries 设计模式：优化 Angular 应用开发

在 Angular 应用开发领域，为了更好地管理数据和实现高效的用户界面，我们经常需要处理查询操作。这些查询操作通常涉及从后端服务器获取数据或根据用户交互获取数据，并将其显示在应用程序的界面上。为了优化这一过程，我们可以使用 Queries 设计模式。本文将详细介绍 Queries 设计模式的核心概念以及如何在 Angular 应用中有效地使用它。

什么是 Queries？

Queries 可以被定义为一个类的属性，通过存储 QueryService.create 工厂方法调用的结果来实现。它们有以下参数：

1. 一个函数，用于返回查询的值（通常是对连接器的调用）。
2. 一个选项对象（通常用于指定重新加载和重置的触发条件）。

下面是一个示例：

protected titleQuery: Query<Title[]> = this.query.create(
  () => this.userProfileConnector.getTitles(),
  {
    reloadOn: [LanguageSetEvent],
  }
);

在上述示例中，我们创建了一个名为 titleQuery 的查询，它通过调用 userProfileConnector.getTitles() 函数来获取标题数据，并指定了一个触发重新加载的条件，即 LanguageSetEvent 事件。这意味着每当 LanguageSetEvent 事件发生时，查询将重新加载数据。

触发条件：reloadOn 和 resetOn

Queries 模式的关键之一是能够根据特定的事件或可观察流触发数据的重新加载或重置。这些触发条件由 reloadOn 和 resetOn 参数定义，并且可以接受事件或可观察流作为参数。每次发出这种类型的可观察对象时，都会触发数据的重新加载（对于 reloadOn 触发条件）或数据的重置（对于 resetOn 触发条件）。

主要区别在于，reset 会立即清除查询状态，而 reload 只会在加载新数据时更新状态，不会立即清除旧数据。

使用 Reload 触发条件

reload 触发条件非常适合处理语言和货币更改事件。在这种情况下，通常希望在这些事件发生后立即更新所有与语言或货币相关的内容，但又不希望引入界面闪烁或显示加载器。使用 reload 触发条件，查询会在语言或货币更改后在后台重新加载数据，同时仍然显示当前值。当从API中获取到新的响应以匹配正确的语言时，UI将使用新值进行更新，从而提供流畅的用户体验。

例如，考虑一个多语言应用程序，用户可以随时切换语言设置。如果用户在应用程序中选择了新的语言，触发 LanguageSetEvent 事件，reload 触发条件会确保在后台加载新语言的内容，而不会中断用户的操作。

使用 Reset 触发条件

reset 触发条件非常适合响应可能引入后端状态重大更改的事件。一个例子是 OrderPlacedEvent，它表示当前购物车已经下单，并且现在为空。在这种情况下，一旦发生 OrderPlacedEvent 事件，当前购物车状态就不再有效，因此最安全的做法是将其重置为未定义的值，并使用更新后的API状态重新加载购物车数据（这可能是一个空购物车）。

此外，可组合的商店前端可以通过显示购物车组件上的加载指示器来响应状态重置，同时应用程序等待API响应。这有助于向用户传达正在加载数据的信息。

实际应用场景

为了更好地理解 Queries 设计模式的实际应用，让我们考虑一个电子商务应用程序的例子。在这个应用中，用户可以浏览产品，将产品添加到购物车，并在下单时查看订单详情。以下是一些用例：

查询产品列表

我们可以创建一个查询来获取产品列表，并在用户浏览不同类别的产品时触发 reload 以确保数据是最新的。

protected productListQuery: Query<Product[]> = this.query.create(
  () => this.productService.getProducts(),
  {
    reloadOn: [CategoryChangeEvent],
  }
);

在这里，CategoryChangeEvent 事件会触发产品列表的重新加载，以便及时更新页面上的产品信息。

查询购物车

购物车是一个特殊的用例，因为它可能会在多个事件中发生更改。我们可以使用 reset 触发条件来处理购物车的更新。

protected shoppingCartQuery: Query<CartItem[]> = this.query.create(
  () => this.cartService.getShoppingCart(),
  {
    resetOn: [OrderPlacedEvent, CartClearedEvent],
  }
);

在这里，OrderPlacedEvent 和 CartClearedEvent 事件都会触发购物车查询的重置。一旦订单下单或购物车被清空，我们就希望购物车的状态立即重置，以便反映最新的情况。

总结