web-dev-qa-db-fra.com

Comment mettre en cache les données récupérées dans React sans redux

Je sais, en utilisant Redux j'ai en commun store et quand je change d'emplacement, par exemple je suis passé de /videos page, mais j'ai encore récupéré des vidéos dans mon videos réducteur. Donc, si je décide de revenir à ma page videos, je montre à l'utilisateur les vidéos déjà chargées de mon magasin, et je chargerai plus s'il en a besoin et les stocke.

Mais dans React sans Redux si je change d'emplacement /videos où j'ai récupéré quelques vidéos, puis les ai stockées dans mon état local de mon composant VideosPage, puis je suis revenu sur cette page, je n'ai plus de vidéos et je devrais les récupérer à partir de zéro.

Comment puis-je les mettre en cache et est-ce possible?

PS: C'est plus une question theoretical donc aucun code n'est fourni.

javascriptreactjscachingreact-reduxbrowser-cache
13
Den Gas

La meilleure façon d'enregistrer des données lorsque vous souhaitez les repeupler ultérieurement est de les enregistrer dans localStorage, ce qui vous permet d'obtenir les données même après avoir actualisé l'application

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;
9
Shubham Khatri

Vous pouvez mettre en cache avec: -

1) Stockage local

2) Boutique Redux

3) Gardez les données entre le montage et le démontage

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;
4
tarzen chugh

Votre problème est que le composant est démonté lorsque vous naviguez.

Vous pouvez augmenter l'état vidéo jusqu'à un composant qui ne sera pas démonté.

ou

Si vous évitez le redux et selon la façon dont vous gérez la navigation, vous pouvez toujours avoir votre conteneur vidéo monté et si l'itinéraire correspond, il rend videos sinon il renvoie null.

1
Eric Hasselbring