redux商店中的大数据

Question

好吧，让我们直截了当。事实是，我从JSON格式的API中获取大量数据（~1.5MB甚至可能更多），我应该将这些数据存储在redux存储中。并以表/列表的形式显示数据。

为了更准确，我得到这样的东西：

{
    id: 1,
    name: "John",
    surname: "Snow",
    hobby: "to know nothing"
}...

我应该在可编辑的表格中显示这样的数据，如下所示：

id|name|surname|hobby
1 |John|Snow   |to know nothing

所以，我的问题是在redux商店中存储和显示这么多数据的最佳方法是什么？需要注意的重要一点是API没有分页选项，我将所有数据都放在一个块中。

现在我将数据存储在商店中，如下所示：

{
    usersById: {
       1: {
           id: 1,
           name: "John",
           surname: "Snow",
           hobby: "to know nothing"
       }...
    }
}

我相信这很好。但是，当我从API获取数据时，我最大的担心是页面滞后甚至冻结了一段时间，将其存储在商店中并立即显示在简单的div中。而且我不确定这是否可以，因为没有可能从API中获取数据？或者我做错了什么？因为我对这些数据没有任何魔力，只需简单的get-＆gt; put to store-＆gt;以简单的div显示数据。

任何评论都会非常感激。

谢谢：）

Answer 1

将数据存储在Redux存储中可能会很好，除非您在下载数据后进行了大量计算。但您可能会注意到在渲染表时所描述的一些问题。

一种解决方案是窗口化结果，即所有数据都加载到Redux存储中，但是你不会一次显示所有内容..而是你渲染第一个25/50/100，只有当你得到时才渲染更多在表格的底部（并且可以卸载不再可见的第一个）。

实现这一目标的一个流行的库是react-virtualized，它很容易实现这种仅渲染屏幕上实际可见内容的逻辑。