मुझे पता है, Redux का उपयोग करके मेरे पास सामान्य store है और जब मैं अपना स्थान बदलता हूं, उदाहरण के लिए मैं /videos पृष्ठ से गया, लेकिन मुझे अभी भी अपने videos रिड्यूसर में वीडियो प्राप्त हुए हैं . इसलिए यदि मैं अपने videos पृष्ठ पर वापस जाने का निर्णय लेता हूं, तो मैं उपयोगकर्ता को अपने स्टोर से पहले से लोड किए गए वीडियो दिखाता हूं, और यदि उसे आवश्यकता होगी तो और लोड करेगा और उन्हें संग्रहीत करेगा।

लेकिन React में Redux के बिना अगर मैं अपना स्थान बदलता हूं /videos जहां मैंने कुछ वीडियो लाए और फिर उन्हें मेरे VideosPage घटक के अपने स्थानीय राज्य में संग्रहीत किया और फिर इस पर वापस चला गया पेज, मेरे पास अब कोई वीडियो नहीं है और उन्हें नए सिरे से लाना चाहिए।

मैं उन्हें कैश कैसे कर सकता हूं और क्या यह बिल्कुल संभव है?

पुनश्च: यह अधिक theoretical प्रश्न है इसलिए कोई कोड प्रदान नहीं किया गया है।

17
Den Gas 30 मार्च 2018, 15:17

3 जवाब

सबसे बढ़िया उत्तर

जब आप बाद में इसे फिर से पॉप्युलेट करना चाहते हैं तो डेटा को बचाने का सबसे अच्छा तरीका इसे 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;
11
Shubham Khatri 30 मार्च 2018, 13:27

आप इसके साथ कैश कर सकते हैं: -

1) स्थानीय भंडारण

2) रेडक्स स्टोर

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;
4
tarzen chugh 30 मार्च 2018, 12:30

यदि आप ब्राउज़र स्तर (क्लाइंट-साइड) में डेटा (जटिल डेटा प्रकार) सहेजना चाहते हैं, तो आप इंडेक्स डीबी का उपयोग कर सकते हैं जो अब अधिकांश आधुनिक ब्राउज़रों में संगत है। इंडेक्सडीबी ब्राउज़र स्तर पर डेटा को सहेजने और लाने के लिए लेनदेन और अनुक्रमणिका सुविधा प्रदान करता है। और जो अतुल्यकालिक है। ब्राउज़र कैशिंग के बारे में अधिक जानकारी प्राप्त करने के लिए कृपया इस लिंक का अनुसरण करें।

इंडेक्सड डीबी और कैशिंग

0
dush88c 7 फरवरी 2020, 05:35