爲react/reducex應用程序消耗正常化json數據

我們的應用程序基本上是一個圖像搜索引擎。我們有大約20000-30000張圖片，我們希望通過關鍵字或按類別（或兩者）進行搜索。爲react/reducex應用程序消耗正常化json數據

第一個考慮是在開始時（加載頁面時）異步獲取所有信息，以便應用程序可以作爲Spa（無延遲延遲並最小化對服務器的影響）。

我們的jsons被歸一化，所以我們減小了文件的大小。我們不會修改數據從客戶端，所以這是我們從標準化jsons

categories.json得到的唯一benefict：

{ 
     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文件。

這些是我們已經想到了解決方案，所以我們想知道你會選擇哪一個：

我們用768,16非規範化的JavaScript我們的數據並把它作爲一個屬性的反應組分。我幾乎是新的React/Redux，所以我不知道是否有任何模式，庫...來做到這一點。
也許正常化/非規範化數據的最佳方式可能是IndexedDB，但是it's not broad supported。通過這種方式，規範化/非規範化比使用JavaScript更容易，我們可以將數據緩存起來。
忘掉我們最初的想法，請求非規範化json數據到API服務器，這樣每次我們搜索圖片時，我們都會發出ajax請求。我們的API仍然需要完成，所以它會好的。隨着我們的圖像庫的增長，這種設計更具可擴展性。

來源

2015-11-10 user2670996

這是很多數據。你測過它了嗎？ –

正常化，大概5MBytes。大小沒有問題。 – user2670996

您是否考慮過使用appcache api？至少對於圖像來說，元數據可以存儲在indexeddb中。 Btw所有現代瀏覽器都支持indexeddb。 –

考慮到圖像列表的大小，最好是在服務器上處理過濾，並將過濾後的列表發送到客戶端。無論是否進行過濾，您都可以考慮分頁圖像列表，而不是一次發送整個列表。分頁使其更加複雜一些，但保留了客戶端的響應能力。

來源

2015-11-10 16:28:19

json文件大小沒問題，大約5MBytes 。 Pagin是必須的，因爲應用程序必須無論如何請求圖像文件 – user2670996

如果您不介意發送整個內容，那麼只需處理商店中的規範化數據就沒有問題。我這樣做的方式是有sourceData，filterData和liveData。當過濾器處於活動狀態時，liveData = filterData，否則爲liveData = sourceData。組件獲取liveData。 –

在我們的視圖組件中，我們必須顯示來自幾個jsons的數據，它不是過濾，而是像數據庫中的某種連接。用戶輸入一個關鍵字，我們需要顯示的圖像，許可證，涉及的類別...我想我們需要的東西，如https://github.com/agershun/alasql – user2670996

爲react/reducex應用程序消耗正常化json數據

回答

相關問題