每次渲染组件时加载新数据或使用存储数据

时间:2019-02-19 09:29:40

标签: angular redux ngrx

我试图了解Redux模式与Angular 2结合使用的好处,但是我脑海中不断浮现出一个问题。

比方说,我有一个仪表板页面,可以在该页面上加载网站上最受欢迎的产品。首次访问此页面时,将发送API调用以从服务器获取产品,然后将这些产品存储在我的商店中。到目前为止,一切都很好。在仪表板页面上,我单击以转到另一页,然后在几秒钟内返回仪表板。回到仪表板页面时,商店中有一些数据可以显示给用户。问题是,我应该发送一个新的API请求以获取最新数据还是应该只显示商店中的数据?以下是我们可以分析的方案:

显示商店中的数据

如果我显示商店中的数据,则该数据可能不是服务器上当前可用的最新数据,但我保存了一个API调用。另一个问题是如何以及何时更新商店数据,或者最好说何时我的商店数据无效?

发送API请求

另一方面,如果我每次去仪表板时都发送API调用,那么将数据存储在存储区中有什么好处(因为每次渲染组件时都会更新存储区)。这样,我始终可以从API获取最新的数据,但是我不必保存在商店中,因为在我再次访问仪表板页面之前,数据将以任何方式存储在商店中。这样,我也会一直联系我的API,这并不理想。

问题

您使用的是什么方法?

1 个答案:

答案 0 :(得分:1)

如果您使用Redux模式,那么这应该是唯一的真理。这意味着您必须从商店而不是直接从API获取数据。

  

如何以及何时更新商店数据,或者说我的商店数据无效的时间更好?   有两种方法。

  1. 乐观
  2. 悲观

第一种方法假定服务器API一切正常,无论您将数据持久存储在商店中如何。假设您发送了一个POST请求,以通过API将产品持久保存在DB上,并且服务器响应500。您的商店中有鬼产品。

第二种方法假定一切顺利。在该产品的上一个示例中,除非从API得到200响应,否则您将不会在商店中保留任何内容。或者,您可以首先在商店中添加产品,如果出现问题,则将其删除。

现在,在您的问题中,是否必须发送API请求还是值得商:的:) 在请求呈现仪表板组件时,您发送 Action LOAD_DASHBOARD_PRODUCTS。此操作将触发效果,该效果随后将API请求发送到服务器以获取数据。最后,解析器会更改商店特定切片的状态。 在代码中的某个位置(最有可能在onInit()方法上),您正在通过特定的选择器从存储中请求数据。这个选择器负责触发我前面提到的动作。

要回答您的问题,这取决于您遵循的加载仪表板数据的流程。在大多数情况下,每次加载仪表板时,我都会加载仪表板数据。

但是,您的困惑非常准确。如果必须一次又一次发送API请求,为什么还要使用Redux模式?好吧,如果您的项目的复杂性如此之大(Dashboad-具有简单CRUD页面的产品),那么Redux模式就不是正确的选择。