如何在没有 redux 的情况下缓存获取的数据

Question

我知道，使用 Redux 我有共同点 store 当我改变我的位置时，例如我从 /videos videos 减速器。因此，如果我随后决定返回到我的 videos 页面，我会向用户显示已经从我的商店加载视频，并且如果他需要，将加载更多视频并存储它们。

But in React without Redux if I change my location /videos where I fetched some videos and then stored them in my local state of my VideosPage 组件然后返回此页面，我没有视频了，应该从头开始获取它们。

我怎样才能缓存它们，这有可能吗？

PS：这是更多 theoretical 问题所以没有提供代码。

原文由 Den Gas 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

虽然目前接受的答案（将状态存储在 localStorage 中）可以完成工作，但我犹豫是否建议这样做，因为它打破了很多模式。您现在将部分地在 React 生态系统之外驱动状态管理，违反状态机模式并使您的应用程序依赖于外部全局变量。只要它只是一个缓存并且只在这个位置被访问和设置，它就不会是最严重的错误，但你永远不知道什么时候你会有一个开发人员过来并认为“哦，嘿，我有这个state 存储在 localStorage 中，我将以这种方式获取它，”然后你就会遇到一些麻烦。

相反，我会建议以下之一：

• 将状态存储在未卸载的父组件中，并通过 props 为相关组件提供数据和状态设置器的访问权限。

• 为状态设置上下文提供者，将其存储在那里，然后使用 useState 挂钩或上下文使用者订阅您需要的上下文。

每种方法都有一些缺点，例如，对于第一个选项，您需要进行更多的道具钻探，并且您将在与其直接相关的抽象级别存储状态，而在后一种情况下使用如果您只在一个地方或一个组件层深处使用状态，上下文可能有点重量级，但我会让您自行判断哪种方法更适合您的用例。

任何一个都会将您所有的状态管理保留在 React 生态系统中，并避免您自己或不理解当前基本原理的未来开发人员违反任何模式。

原文由 Howie Reith 发布，翻译遵循 CC BY-SA 4.0 许可协议