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

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

首先要考虑的是在一开始（页面加载时）异步获取所有信息，以便应用程序可以作为spa工作（无延迟，并将对服务器的影响降至最低）

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

categories.json：

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

关键字.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文件

这些是我们考虑过的解决方案，因此我们想知道您会选择哪一种：

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

也许对数据进行规范化/非规范化的最佳方法可能是IndexedDB，但是。这样，规范化/非规范化可能比使用javascript更容易，我们可以缓存数据

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

---

考虑到图像列表的大小，最好在服务器上处理过滤，并将过滤后的列表发送给客户端。有或没有过滤，您可能会考虑分页图像列表，而不是立即发送整个列表。分页使它变得更加复杂，但保留了客户端的响应能力。

这是大量的数据。你测量过了吗？正常化了，大约5字节。大小没有问题。您是否考虑过改用appcache api？至少对于图像，元数据可以存储在indexeddb中。顺便说一句，所有现代浏览器都支持indexeddb。这是我们的第二个选择。json文件大小的可能副本是可以的，大约5字节。Pagin是必须的，因为应用程序无论如何都必须请求图像文件。如果您不介意发送整个文件，那么只处理存储中的规范化数据是没有问题的。我这样做的方式是使用sourceData、filterData和liveData。当筛选器处于活动状态时，liveData=filterData，否则liveData=sourceData。该组件获取liveData。在我们的视图组件中，我们必须显示来自多个JSON的数据，它不是过滤，而是数据库中的某种连接。用户输入关键字，我们需要显示涉及的图像、许可证、类别。。。我想我们需要一些东西，比如数据是否与存储中的liveData相关。在不了解全局的情况下，很难给出准确的建议。