每个反应视图调用服务器获取信息,正确的方法?

Each react view calling the server for info, the right approach?

我是 React 新手,我正在构建一个任务列表应用程序,其中一个页面显示任务类别列表(类别页面),另一个页面显示一个类别的任务列表(任务列表页面) ,显示有关任务的更多详细信息的页面(任务详细信息页面)。只是一个应用程序,可以帮助我掌握使用 MERN 堆栈的概念。

我有一个布局,类别、任务列表和任务详细信息页面不是彼此的子页面,因此它们不能相互传递道具,我需要一个类别中所有任务的数据显示在任务列表上页面和任务详细信息将显示在任务详细信息页面上。

现在我已经能够使用 redux 在应用程序启动时通过服务器从数据库中获取所有详细信息,但问题是当用户直接导航到任务时,例如,让我们假设 link 是可共享的并且用户导航到那个 link,redux 存储中的所有数据都消失了,然后我需要再次从数据库中获取数据。我知道我可以将存储数据保存到 LocalStorage 或客户端存储,但我假设在这种情况下数据并不意味着 public (只是为了学习如何处理私有数据),所以我可以'将它们存储在客户端存储中,因为每个人都可以访问它,这就是为什么我在状态消失时继续从服务器获取的原因。

如果此应用程序增长并且用户每个类别有 1000 多个任务(仅举个例子),我的想法是访问服务器会更耗时,因为每次刷新应用程序都必须重新加载所有数据,以及初始数据加载,可能太大而无法在应用程序启动时加载,并可能导致延迟。

让每个页面调用服务器获取它需要的数据是否有意义,或者我应该在启动时继续加载所有内容吗?

顺便说一下,我在 mongo 中使用嵌入式结构将任务列表存储在一个类别中。

您可以使用库来处理将数据持久化到本地存储的问题,为此您可以使用:

redux-persist

之后您可以使用其他库来加密本地存储中的数据,为此您可以使用:

redux-persist-transform-encrypt