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

Question

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

但是在没有 Redux 的 React 中，如果我更改我的位置 /videos，我在那里获取了一些视频，然后将它们存储在我的 VideosPage 组件的本地状态中，并且然后回到这个页面，我没有视频了，应该从头开始。

我如何缓存它们，这可能吗？

PS：这是更多 theoretical 问题，因此未提供代码。

Answer 1

您可以缓存：-

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 2

当您想稍后重新填充数据时，最好的保存数据的方法是将其保存在 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 3

您的问题是当您导航时组件正在卸载。

您可以将视频状态提升到不会卸载的组件。

或

如果您避免使用 redux，并且根据您处理导航的方式，您始终可以安装您的视频容器，如果路由匹配，它会呈现 videos 否则它 returns null .

Answer 4

如果你想在浏览器级别（客户端）保存数据（复杂数据类型），你可以使用 IndexDb，它现在与大多数现代浏览器兼容。 IndexDB 提供事务和索引功能以在浏览器级别保存和获取数据。这是异步的。请关注此 link 以获取有关浏览器缓存的更多详细信息。

IndexedDB and Caching

Answer 5

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

相反，我建议执行以下操作之一：

将状态存储在未卸载的父组件中，并通过 props 向相关组件提供对数据和状态的访问权限 setter。
为状态设置上下文提供者，将其存储在那里，然后使用 useState 挂钩或上下文使用者订阅您需要的上下文。

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

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

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

How to cache fetched data in react without redux

javascript

caching

browser-cache

reactjs

react-redux