रेडक्स राउटर - रीफ्रेश के बाद राज्य को फिर से कैसे चलाएं?

Question

मेरे पास एक बहु-चरण फ़ॉर्म एप्लिकेशन है, और मैं अपने सिर को पाने के लिए संघर्ष कर रहा हूं कि मैं अपने रेडक्स राज्य को कैसे बचा सकता हूं और उदाहरण के लिए रीफ्रेश के बाद इसे फिर से चला सकता हूं? ऐप में वापस/आगे जाकर अपेक्षित काम करता है, लेकिन ब्राउज़र रीफ्रेश होने के बाद, मेरा पिछला राज्य खाली है। आदर्श रूप से मैं पथ से संबंधित सत्र भंडारण में पूर्व राज्य को सहेजने में सक्षम होना चाहता हूं, ताकि मैं बाद में फिर से खेल सकूं, लेकिन मैं नहीं देख रहा हूं कि मैं इसे आसानी से कैसे कर सकता हूं। क्या किसी ने ऐसा कुछ किया है और कुछ पॉइंटर्स प्रदान कर सकते हैं? धन्यवाद।

Answer 1

ऐसा लगता है कि आप एक-पेज एप फ्रेमवर्क का उपयोग एकाधिक पृष्ठ संदर्भ में करने का प्रयास कर रहे हैं। दो नाटक नाइसर को एक साथ बनाने के लिए, आप अपना खुद का मिडलवेयर बनाने में देख सकते हैं जो रीफ्रेश/पेज नेविगेशन के बाद किसी भी राज्य को खोने वाले प्रतीत होने वाले ऐप को बनाने के लिए localStorage से राज्य को सिंक्रनाइज़ करता है।

1. तरीका है कि redux-logger लॉग both the previous and next states, मैं शायद createStoreWithMiddleware समारोह सृजन (सही redux-logger से पहले) की शुरुआत (localStorageLoad) और अंत (localStorageDump) में मिडलवेयर प्लग इन करके शुरुआत करते हैं, करने के लिए समान:

// store/configureStore.js 

const createStoreWithMiddleware = applyMiddleware(
    localStorageLoad, thunk, promise, localStorageDump, logger 
)(createStore); 

1. फिर एक प्रारंभिक कार्रवाई सही आग जब आप पहले अपने एप्लिकेशन renders संग्रहीत राज्य लोड करने के लिए अपने अनुप्रयोग को प्रारंभ:

// index.js 

const store = configureStore(); 

store.dispatch({ type: 'INIT' }); 

ReactDOM.render(<App />, document.getElementById('root')); 

localStorageLoadINIT कार्रवाई को संभालने और SET_STATE कार्रवाई के कुछ प्रकार है, जिनके अनुसार पहले से localStorage में बचा लिया गया था के साथ एक पेलोड शामिल हैं प्रेषण जाएगा।

// middleware/localStorageLoad.js 

export default store => next => action => { 
    const { type } = action; 
    if (type === 'INIT') { 
     try { 
      const storedState = JSON.parse(
       localStorage.getItem('YOUR_APP_NAME') 
      ); 
      if (storedState) { 
       store.dispatch({ 
        type: 'RESET_STATE', 
        payload: storedState 
       }); 
      } 
      return; 
     } catch (e) { 
      // Unable to load or parse stored state, proceed as usual 
     } 
    } 

    next(action); 
} 

फिर, एक कम करने जो कि पेलोड के साथ राज्य को बदल देता है, प्रभावी रूप से अनुप्रयोग रिबूट करने के रूप में यह पहले से था जोड़ें।

1. पाश पूरा करने के लिए, आप एक localStorageDump मिडलवेयर कि श्रृंखला है कि localStorage में प्रत्येक कम राज्य वस्तु की बचत होती है के अंत में आता है की जरूरत होगी। कुछ इस तरह:

// middleware/localStorageDump.js 

export default store => next => action => { 
    const state = store.getState(); 
    localStorage.setItem('YOUR_APP_NAME', JSON.stringify(state)); 
    next(action); 
} 

बस एक विचार है, वास्तव में इसे करने की कोशिश नहीं की है। उम्मीद है कि आप एक समाधान की ओर शुरू करने में मदद करता है।

Answer 2

आप रीफ्रेश पर राज्य को स्टोर नहीं कर सकते हैं यह सामान्य है। आम तौर पर आप इन कुकीज़ या वेब स्टोरेज के अंदर स्टोर करते हैं।

• कुकीज ब्राउज़र, सर्वर के बीच समन्वयित होते हैं और आपके द्वारा किए जाने वाले प्रत्येक अनुरोध पर सेट होते हैं।
• Localstorage आपको डेटा स्टोर करने के लिए 5 एमबी तक देता है और अनुरोध के साथ कभी भी नहीं भेजता है।

Redux:

1. सेट LocalStorage गुण जब फ़ॉर्म भरना। (पूर्ण होने पर इसे साफ़ करना सुनिश्चित करें)
2. पृष्ठ को अपूर्ण रूप से रीफ्रेश करें।
3. जब माउंट अपने Form घटक, componentWillMount विधि का उपयोग एक कम करने
4. कम करने को अद्यतन करता redux राज्य है जो बदले में गुण आप LocalStorage से मिला साथ घटक अद्यतन करता है करने के लिए localstorage और dispatch डेटा को पढ़ने के लिए प्रतिक्रिया।

यदि आप फॉर्म डेटा स्टोर करने के लिए रेडक्स का उपयोग स्थानीय स्टोरेज के गुण प्रेषण करते हैं।

यदि Form घटक के अंदर स्थानीय स्टोरेज नहीं पढ़ा और प्रारंभिक मान सेट करें।

आशा है कि इससे मदद मिलती है!