为 react/redux 应用程序使用规范化 json 数据

Question

我们的应用基本上是一个图片搜索引擎。 我们有大约 20000-30000 张图片，我们希望通过关键字或类别（或两者）来搜索它们。

首先要考虑的是在开始时（在页面加载时）异步获取所有信息，以便应用可以作为 spa 工作（没有延迟延迟并最大限度地减少对服务器的影响）。

我们的 json 被标准化，因此我们减小了文件的大小。我们不会从客户端修改数据，所以这是我们从规范化 json 中获得的唯一好处

categories.json：

{
      language: "xxxx",
      "categories": [
      {
          "id": 1,
          "parent_id": null,
          "label": "House"
      }, {
          "id": 2,
          "parent_id": 1,
          "label": "Furniture"
      },
       ....
     ]
  }

keywords.json：

 {
  "language": "xxx",
  "keywords":
  [
    {
        "id": "table",
        "images": [2381, 2746, 3602, 4038, 6572, 6572, 13176, 13273, 28659, 28660],
        "cat": [1, 2]
    },
    .... 

  ]
}

images.json:

{
  "base-url": "http://www.xxxxx.org/images/",
  "images": [
    {
      "id": 2381
      "license": 7,
      "type": 3,
      "file": "4.jpg"
    },
    .....

  ]
}

license.json 和 type.json 类似。

当我们想到规范化的 json 时，我们必须解决问题：

我们应该对我们的数据进行非规范化以显示给用户。

我们应该缓存数据，这样我们就不会几乎每次用户打开我们的网页时都下载 json 文件。

这些是我们想到的解决方案，所以我们想知道您会选择哪一个：

1. 我们应该使用 JavaScript 对我们的数据进行非规范化，并将其作为属性发送给 react 组件。我对 React/Redux 几乎是新手，所以我不知道是否有任何模式、库......可以做到这一点。

2. 也许对我们的数据进行规范化/反规范化的最佳方法可能是 IndexedDB，但 it's not broad supported。通过这种方式，规范化/去规范化可能比使用 javascript 更容易，并且我们可以缓存我们的数据。

3. 忘记我们最初的想法，向 API 服务器请求非规范化的 json 数据，因此每次搜索图像时，我们都会发出 ajax 请求。我们的 API 仍然需要完成，这样就可以了。随着我们的图像库的增长，这种设计更具可扩展性。

Answer 1

考虑到图像列表的大小，最好在服务器上处理过滤并将过滤后的列表发送到客户端。无论有没有过滤，您都可以考虑对图像列表进行分页，而不是一次发送整个列表。分页使它稍微复杂一些，但保留了客户端的响应能力。