Question

我知道，使用Redux我有共同的store，当我更改我的位置时，例如我从/videos页面开始，但我仍然在{{1}中提取了视频减速器。因此，如果我决定返回我的videos页面，我会向我的商店显示用户已加载的视频，并在需要时加载更多视频并存储。

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

我如何缓存它们，是否可能？

PS：这是VideosPage更多问题，因此没有提供代码。

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

您可以缓存： -

1）本地存储

2）Redux商店

3）在mouting和unmounting之间保持数据

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 3

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

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

或

如果您正在避免使用redux，并且根据您处理导航的方式，您可以随时安装视频容器，如果路径匹配，则呈现videos，否则返回null。

Answer 4

如果要在浏览器级别（客户端）保存数据（复杂数据类型），则可以使用IndexDb，它现在在大多数现代浏览器中都兼容。 IndexDB提供事务和索引功能，以在浏览器级别保存和获取数据。而这是异步的。请点击此链接以获取浏览器缓存的更多详细信息。

IndexedDB and Caching

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

4 个答案: