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

问题描述

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

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

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

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

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

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

解决方法

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

redux-persist

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

redux-persist-transform-encrypt