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

Question

我知道,使用Redux我有共同点store,当我改变我的位置时,例如我从/videos页面开始,但我仍然在我的videosreducer中获取了视频.因此,如果我决定返回我的videos页面,我会显示用户已经从我的商店加载了视频,并在需要时加载更多并存储它们.

但是如果React没有Redux我改变我的位置/videos,我获取一些视频,然后将它们存储在我的VideosPage组件的本地状态,然后回到这个页面,我已经没有视频了,应该从头开始获取它们.

我怎样才能缓存它们,是否可能？

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

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

相反，我建议采用以下方法之一：

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

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

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

任何一种都可以将所有状态管理保留在 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;