Question

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

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

我们的jsons已经规范化，因此我们减小了文件的大小。我们不会修改客户端的数据，因此这是我们从规范化jsons中获得的唯一好处

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类似。

当我们考虑规范化的jsons时，我们遇到了问题：

我们应该将数据非规范化以便向用户显示。

我们高速缓存数据，因此几乎每次用户打开我们的网页时都不会下载json文件。

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

我们使用JavaScript对数据进行反规范化，并将其作为属性发送给react组件。我几乎是React / Redux的新手，所以我不知道是否有任何模式，库......要做到这一点。
对我们的数据进行规范化/非规范化的最佳方法可能是IndexedDB，但it's not broad supported。通过这种方式，normalize / denormalize可能比使用javascript更容易，我们可以缓存数据。
忘掉我们最初的想法，向API服务器请求非规范化的json数据，这样每次我们搜索图像时都会发出ajax请求。我们的API仍然需要完成，所以没关系。随着我们的图像库可以增长，这种设计更具可扩展性。

Answer 1

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

使用react / redux应用程序

1 个答案: