如何在沒有 redux 的情況下緩存獲取的數據

Question

我知道，使用Redux我有公共store ，當我更改位置時，例如我從/videos頁面轉到，但我仍然在我的videos減速器中獲取了視頻。 因此，如果我隨后決定 go 返回我的videos頁面，我會向用戶顯示已經從我的商店加載的視頻，如果他需要並存儲它們，則會加載更多視頻。

但是在沒有Redux的React中，如果我更改我的 location /videos ，我在其中獲取了一些視頻，然后將它們存儲在我的VideosPage組件的本地 state 中，然后返回到此頁面，我就沒有視頻了，應該從頭開始獲取它們。

我怎樣才能緩存它們，這有可能嗎？

PS：這是一個更theoretical的問題，所以沒有提供代碼。

Answer 1

當您想在以后重新填充數據時保存數據的最佳方法是將其保存在localStorage ，這樣您甚至可以在刷新應用程序后獲取數據

const InitialState = {
   someState: 'a'
}
class App extends Component {

 constructor(props) {
  super(props);

  // Retrieve the last state
  this.state = localStorage.getItem("appState") ? JSON.parse(localStorage.getItem("appState")) : InitialState;

}

componentWillUnmount() {
  // Remember state for the next mount
  localStorage.setItem('appState', JSON.stringify(this.state));
}

render() {
  ...
 }
}

export default App;

Answer 2

雖然目前接受的答案（將 state 存儲在 localStorage 中）可以完成工作，但我不願建議這樣做，因為它打破了很多模式。 您現在將在 React 生態系統之外部分驅動 state 管理，違反 state 機器模式並使您的應用程序依賴於外部全局變量。 只要它只是一個緩存並且只在這個位置被訪問和設置，它就不會是最嚴重的錯誤，但你永遠不知道什么時候你會有一個開發人員過來並認為“哦，嘿，我有這個state 存儲在 localStorage 中，我將以這種方式獲取它，”然后你就會遇到一些麻煩。

相反，我會建議以下之一：

• 將 state 存儲在未卸載的父組件中，並通過 props 向相關組件授予數據訪問權限和 state 設置器。

• 為 state 設置上下文提供者，將其存儲在那里，然后使用 useState 掛鈎或上下文使用者訂閱您需要的上下文。

每種方法都有一些缺點，例如，對於第一個選項，您需要進行更多的道具鑽探，並且您將在與其直接相關的抽象級別存儲 state，而在后一種情況下使用如果您僅在一個地方或一個組件層深度使用 state，上下文可能有點重量級，但我將讓您自行判斷哪種方法更適合您的用例。

任何一個都會將您的所有 state 管理保留在 React 生態系統中，並避免您自己或不了解當前基本原理的未來開發人員違反任何模式。

Answer 3

您可以緩存：-

1) 本地存儲

2) Redux 商店

3) 在掛載和卸載之間保留數據

import React, { Component, PropTypes } from 'react';

// Set initial state
let state = { counter: 5 };

class Counter extends Component {

 constructor(props) {
  super(props);

  // Retrieve the last state
  this.state = state;

  this.onClick = this.onClick.bind(this);
}

componentWillUnmount() {
  // Remember state for the next mount
  state = this.state;
}

onClick(e) {
  e.preventDefault();
  this.setState(prev => ({ counter: prev.counter + 1 }));
}

render() {
  return (
    <div>
      <span>{ this.state.counter }</span>
      <button onClick={this.onClick}>Increase</button>
    </div>
  );
 }
}

export default Counter;

Answer 4

您的問題是導航時組件正在卸載。

您可以將視頻狀態提升到不會卸載的組件。

或

如果您避免使用 redux 並根據您處理導航的方式，您始終可以安裝視頻容器，如果路由匹配，則渲染videos否則返回null 。

Answer 5

如果您想在瀏覽器級別（客戶端）保存數據（復雜數據類型），您可以使用 IndexDb，它現在與大多數現代瀏覽器兼容。 IndexDB 提供了事務和索引功能來在瀏覽器級別保存和獲取數據。 這是異步的。 請點擊此鏈接以獲取有關瀏覽器緩存的更多詳細信息。

IndexedDB 和緩存