विंडो रीलोड (क्लाइंट साइड) पर रेडक्स स्टेट रीसेट्स

Question

मेरे पास & ऑब्जेक्ट्स में बहुत बड़ी और घनी जानकारी वाले ऑब्जेक्टइन्फो, चैटइन्फो, आदि जैसे बहुत बड़ी और जटिल वस्तुएं हैं। जब भी मैं अपने पृष्ठ को रीफ्रेश करता हूं, तब भी मेरे प्रतिक्रिया ऐप में यह बात है कि रेडक्स राज्य रीसेट हो जाता है और मुझे उन सभी एपीआई को फिर से कॉल करना होगा।

मैंने इस विषय पर कुछ शोध किया है। मैंने रेडक्स पर दान एब्रमोव के अंडेहेड ट्यूटोरियल की जांच की। वह क्या करता है ब्राउज़र के स्थानीय स्टोरेज में रेडक्स राज्य को बनाए रखता है और प्रत्येक 100 या 500 एमएस के बाद स्थानीय स्टोरेज को अद्यतन करता है। मुझे लगता है जैसे यह एक कोड गंध है।

स्थानीय स्टोरेज स्थिति को लगातार देखकर और इसे अपडेट करने से, यह ब्राउज़र के प्रदर्शन को प्रभावित नहीं करेगा। मेरा मतलब यह नहीं था कि कोणीय 1 विफल होने के कारणों में यह नहीं था क्योंकि यह लगातार राज्य चर देखने पर रखा गया था और थोड़ी देर के बाद यदि साइट ब्राउज़र में लाइव रखा गया था तो यह धीमा हो गया। क्योंकि हमारी लिपि लगातार चर की स्थिति की जांच करने के लिए रखी गई है। मुझे लगता है जैसे हम एक ही काम कर रहे हैं।

यदि स्थानीय स्टोरेज में रेडक्स राज्य को बनाए रखना सही दृष्टिकोण है तो कोई मुझे बता सकता है क्यों? और यदि नहीं तो बेहतर दृष्टिकोण है?

Answer 1

मुझे लगता है कि ज्यादातर मामलों में आप कुछ कार्यवाही के बाद localStorage में अपने राज्य को जारी रखना चाहते हैं। कम से कम यह उन परियोजनाओं में हमेशा मामला रहा है जहां मुझे इसे जारी रखने की आवश्यकता है।

तो, अगर आप अपने दुष्प्रभाव orchestrating आप आसानी से (localStorage में राज्य बने) कि पक्ष प्रभाव बना सकते हैं ऐसा जब भी उन कार्यों में से एक के लिए जगह लेने के redux-saga, redux-observable या redux-cycles उपयोग कर रहे हैं। मुझे लगता है कि समय-अंतराल के आधार पर डेटा को "यादृच्छिक रूप से" रखने से बेहतर दृष्टिकोण है।

Answer 2

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

Answer 3

सवाल यह है कि आपको किस बिंदु पर लगातार प्राप्त करने की आवश्यकता है। मुझे लगता है कि आपके मामले में जवाब पेज रीलोड पर है। तो यदि आप प्रदर्शन के बारे में चिंता करते हैं तो मैं कहूंगा: * जब राज्य बदलता है तो स्थानीय स्टोरेज को अपडेट करें। जब आप राज्य को अपडेट करते हैं तो अपने reducer के अंदर। * जब आप ऐप बूट करते हैं तो स्थानीय स्टोरेज से पढ़ें।

(इस तरह आप केवल जब स्थिति परिवर्तन लिख सकते हैं और आप केवल एक बार पढ़ें)

पी.एस. मैं Redux ऐप्स में लगातार प्राप्त करने के लिए https://github.com/rt2zz/redux-persist पैकेज की अनुशंसा करूंगा।

Answer 4

मुझे लगता है कि आप redux-storage नामक एनपीएम मॉड्यूल का उपयोग कर सकते हैं। यह लचीला बैकएंड के साथ रेडक्स के लिए दृढ़ता परत प्रदान करता है। आप रेडक्स-स्टोरेज को किसी भी redux-storage-engine के साथ जोड़ सकते हैं। और मेरे विचार में आप इसे redux-storage-engine-sessionstorage के साथ जोड़ सकते हैं, यह मानते हुए कि आप केवल ब्राउज़र को खोलने तक ही जानकारी साझा और सहेजना चाहते हैं। स्थानीय स्टोरेज के साथ ब्राउज़र bloat करने की जरूरत नहीं है। इसे स्पष्ट करने के लिए आपको इसके लिए अतिरिक्त जावास्क्रिप्ट समर्थन की आवश्यकता होगी।

रेडक्स-स्टोरेज भार को ट्रिगर करेगा और प्रत्येक राज्य परिवर्तन के बाद कार्रवाई को बचाएगा। लोड और सेव के मामले में क्या करना है इसके बारे में और अधिक लचीलापन प्रदान करना।इसके अलावा यदि आप कुछ राज्य परिवर्तनों को सहेजना नहीं चाहते हैं तो आप उस राज्य की सरणी को परिभाषित करते हैं जिसे आप फ़िल्टर करना चाहते हैं।

Answer 5

मुझे लगता है कि localStorage का उपयोग करना आपका सबसे अच्छा विकल्प है, क्योंकि ऐसा लगता है कि आप जिस डेटा को संग्रहीत कर रहे हैं वह क्लाइंट पर आवश्यक है। यदि डेटा नहीं बदल रहा है, तो आपको localStorage पर बार-बार पूछताछ या देखने की आवश्यकता नहीं है।

एक और चीज जो आप कर सकते हैं closure को अपने localStorage के आस-पास लपेटें, ताकि आप अपने "बड़े" डेटा को पुनर्प्राप्त करते समय डिस्क को हमेशा मार नहीं रहे। प्रत्येक ब्राउज़र localStorage को अलग-अलग लागू करता है, इसलिए लगातार व्यवहार या I/O प्रदर्शन पर कोई गारंटी नहीं है।

यह अबास्ट्रक्शन की एक साधारण परत भी जोड़ता है जो कार्यान्वयन को छुपाता है, और एक ही स्थान पर आपके उपयोगकर्ता डेटा से संबंधित सब कुछ नियंत्रित करता है।

यहाँ उपयोगकर्ता प्रोफ़ाइल डेटा बंद होने की एक सरल उदाहरण है:

// UserProfile.js 
var UserProfile = (function() { 
    var userData = {}; 

    var getUserData = function() { 
    if (!userData) { 
     userData = JSON.parse(localStorage.getItem("userData")); 
    } 
    return userData; 
    }; 

    var setUserData = function(userData) { 
    localStorage.setItem("userData", JSON.stringify(userData)); 
    userData = JSON.parse(localStorage.getItem("userData")); 
    }; 

    return { 
    getUserData: getUserData, 
    setUserData: setUserData 
    } 
})(); 

export default UserProfile; 

सेट उपयोगकर्ता डेटा वस्तु: यह localStorage के ऊपर लिख देगा, और बंद के अंदर स्थानीय चर सेट।

import UserProfile from '/UserProfile'; 
UserProfile.setUserData(newUserData); 

उपयोगकर्ता डेटा वस्तु प्राप्त करें: यह किसी और बंद के अंदर स्थानीय चर से डेटा प्राप्त होगा, या localStorage से इसे पाने के अगर यह सेट नहीं है जाना।

import UserProfile from '/UserProfile'; 
var userData = UserProfile.getUserData(); 

विचार यहाँ localStorage, पहली बार, अपने ऐप के लोड होने पर, या पर पहली API कॉल से मेमोरी में डेटा लोड करने के लिए, है। ऐसे समय तक जब उपयोगकर्ता प्रोफ़ाइल डेटा बदलता है, (यानी कोई उपयोगकर्ता अपनी प्रोफ़ाइल अपडेट करता है, उदाहरण के लिए), तो आप फिर से एपीआई से पूछेंगे, और UserProfile.setUserData(..) कॉल के माध्यम से फिर से डेटा अपडेट करेंगे।

Answer 6

मैं केवल एक कमजोर कैश के रूप में ऐसा करता हूं और इस पर भरोसा नहीं करता। स्थानीय भंडारण सीमित है (क्रोम पर 5 एमबी उदा।), और उपलब्ध नहीं हो सकता है। आपको सावधानी से सत्यापित करना होगा कि आपका डेटा लिखा गया था।

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

Answer 7

एक विकल्प INITIAL_STATE

window.__INITIAL_STATE__ = { ...state... } 

डेटा भरने और कम करने लोड करने के लिए है:

window.__APP_STATE__.__REDUCERS__.push(reducer) 

Answer 8

यह पूरी तरह से बड़े redux में राज्य जारी रहती है के लिए ठीक है + अनुप्रयोगों प्रतिक्रिया होती है।

प्रत्येक राज्य में परिवर्तन के बावजूद कोणीय 1, निरीक्षक और पाचन चक्र के संबंध में यदि आप rehydrate राज्य को सभी घटकों को रेडक्स कनेक्ट एपीआई और प्रतिक्रिया के vrtualDOM के कारण प्रदान नहीं किया जाता है।

आप देख सकते हैं:

• https://github.com/redux-offline/redux-offline
• https://github.com/rt2zz/redux-persist

प्रदर्शन अपनी प्राथमिक चिंता का विषय नहीं होना चाहिए। यदि यह आपके राज्य को सामान्यीकृत करने की बात आती है और केवल ड्राफ्ट इत्यादि जैसी महत्वपूर्ण जानकारी जारी रखती है (कम जानकारी-कम रिहाइड्रेशन)।

इस तरह के सेटअप के साथ बड़ी समस्या आमतौर पर यदि आपके पास ऐप में कोई पृष्ठभूमि सिंक या सॉकेट अपडेट है। ब्राउजर के कई टैब होने से एसिंक स्थानीय डीबी को लिखता है जिससे पिछले राज्यों के साथ ओवरराइट हो जाता है।

यहाँ पार टैब समन्वयन redux-persist-crosstab

के लिए यह की चोटी पर एक पतली आवरण आप mattermost webapp और कैसे वे वास्तविक समय अनुप्रयोग के लिए इसका इस्तेमाल करते हैं में इन कार्यान्वयन के कुछ की जांच कर सकते है।

वे अतिरिक्त स्थिरता और प्रदर्शन के लिए कुछ हुप्स के माध्यम से जाने - link to store file mattermost webapp में

Answer 9

redux-persis प्रयास करें टी आप आशावादी हठ, अंतर्निहित मंच (वेब ​​/ मोबाइल) के नास्तिक कर सकते हैं।

यदि आपको अभी भी प्रदर्शन मिल रहा है तो यह एक बाधा है। आप चरणों में से निम्न में से कोई भी कर सकते हैं।

कैश मिडिलवेयर

एक मिडलवेयर कि परिवर्तन पर में की सुनने और उन्हें रिकॉर्ड बनाएं लेकिन उनमें से बाहर flushes हर 5 सेकंड।

उपयोगकर्ता कहीं और जाएंगे या ब्राउज़र बंद फ्लश करने के लिए परिवर्तन

हठ रणनीति

डेटा आप दोनों में से एक या तो उपयोग कर सकते हैं जारी रहती है करने के लिए पता लगाने के लिए window.beforeunload के लिए एक ईवेंट हैंडलर संलग्न नीचे रणनीतियां।

• यदि कोई प्रदर्शन बोतल गर्दन नहीं है तो इसे स्थानीय स्टोरेज में स्टोर करें।
• फ़ाइल-अपलोड जैसे सर्वर पर एक JSON ब्लॉब भेजें। ऐप लोड होने और स्थानीय रूप से बने रहने पर अंतिम JSON स्थिति प्राप्त करें।

मैं तुम्हें उपयोग करने के साथ शुरू सुझाव देंगे redux-जारी रहती है। यदि अभी भी एक प्रदर्शन बोतल गर्दन है तो दो दृढ़ता रणनीतियों में से एक के साथ एक कैश मिडलवेयर का उपयोग करें।