在AngX中将状态管理与NGXS一起使用的正确方法

问题描述

我是一名BE开发人员，现在我正在学习Angular6。我对使用NGXS进行状态管理非常感兴趣。我对以下示例有一些担忧：

我有一个端点，该端点返回一组大约16-20k的帐户记录。当用户打开应用程序并成功浏览器登录时，将调用此端点。返回的数据将保存在存储中，并可以在应用程序的整个生命周期中使用。

通过将数据存储在存储中，可以在应用程序的各个组件之间共享此列表，包括：按帐户过滤和搜索，更新帐户信息等。

此外，我们可以减少用于过滤结果的api调用次数（也许这里有更好的方法，请纠正我！），这将改善应用程序的UI / UX。

我的问题是：

1. 是调用端点以获取并保存开始时要存储的大量数据的正确位置吗？

2. 是否将大量数据存储在存储中会提高应用程序的性能？

3. 我认为为此目的获取所有16-20k帐户并不是一种很好的方法，还有更好的方法吗？

4. 安全问题：在商店中存储帐户是否容易被利用？

解决方法

• 董的答案是好的。
• 这里与状态管理无关。
• 用户打开应用程序一次调用API可以减少API调用次数。但是这种方法不利于应用程序的性能。例如，当您使用Select来访问页面时，上面列出的选项是accounts的列表。如果您仍然不关注或搜索Select而仍然调用API，则非常糟糕。

,

1. 您不应该在开始时调用API来获取大量数据。要使您的网站准备就绪，并且不适合UX，需要花费很多时间。

2. 搜索，过滤动作会更快，但是开始时的加载时间确实是个问题。

3. 在前端存储16-20k条记录不是一个好方法，因为您的帐户数据会随着时间变化，并且每次数据库更新时都需要刷新。

4. 是的。浏览器客户端中的存储对于敏感数据是不安全的。

我的建议：

• 提供了用于在后端使用分页进行过滤和搜索的API，使用db索引或诸如Elasticsearch之类的二级存储来提高搜索性能。
• 使用http请求从后端获取搜索结果