我們有一個使用 react 構建的網站。有一個搜索頁面可以獲取我們的服務器以獲取 json 格式的搜索結果。然后顯示結果。然后，用戶點擊一個結果，將他們帶到我們網站上的另一個頁面。然后他們單擊回傳按鈕回傳搜索頁面，但現在所有結果都消失了。
如果我們將結果存盤在 localstorage 或 redux 中，當它們進入搜索頁面時，結果將始終存在。因此，如果他們訪問我們的主頁-> 搜索頁面，當我們從本地存盤中提取時，他們將看到舊的東西。
我的問題是，有沒有辦法構造代碼，以便在搜索時快取結果，但不會快取太多以至于它們總是出現？
uj5u.com熱心網友回復：
如果您可以控制服務器端，則只需確保正確快取 fetch 呼叫即可。然后將立即呈現 JSON 回應。這是侵入性最小的解決方案，并且會利用默認瀏覽器行為。
如果這不是一個選項，您可以遵循一種用于客戶端快取的模式：
- 在 redux 中保存任何給定查詢的搜索結果。
- 當用戶進入搜索頁面時，您會立即顯示 redux 為搜索查詢存盤的內容，同時（當組件掛載時）觸發對同一查詢的新搜索。
- 然后搜索會覆寫在 redux 中為相同查詢快取的內容。
- 如果沒有快取，用戶將不得不等待第一次獲取。
- 如果自上次獲取后結果沒有改變，用戶根本不會注意到任何事情。
- 如果結果發生了變化，用戶將在短時間內看到舊的快取結果（總比沒有好，您仍然可以指示新的搜索正在進行中）然后頁面重新渲染，顯示最新的-日期結果。
示例狀態：
const searchResultsState = {
'query1': [
{...}, {...}, ... // results
],
'query2': [
{...}, {...}, ... // results
],
};
有幾個輔助庫可以幫助解決這個問題，但簡單的 react redux thunk 也足以完成此任務。我認為 redux-toolkit 的某些部分也采用了這種方法。順便說一句，它確實使一個回應迅速、感覺敏捷的應用程式遵循這種快取優先的方法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/465022.html