स्थिति को localStorage के साथ समन्वयित करना

पहली प्रवृत्ति localStorage को एक जगह पढ़ने और दूसरी जगह लिखने की होती है, लेकिन ये दोनों एक-दूसरे से असंगत हो सकते हैं। वे स्थिति अपडेट जिनमें स्थायी रूप से सहेजना भूल जाएँ, या वे सहेजे गए मान जो स्थिति में दिखाई न दें, त्रुटियाँ पैदा करते हैं।

आपको सत्य का एकमात्र स्रोत चाहिए, जो रिएक्ट की स्थिति और भंडारण को हमेशा एक साथ रखे।

साफ़ समाधान एक useLocalStorage हुक है, जो useState को लपेटता है और परिवर्तनों को अपने-आप स्थायी रूप से सहेजता है। यह useState की तरह ही एक मान और उसे बदलने वाला फ़ंक्शन लौटाता है।

इसका उपयोग करने वाला कोड इसे सामान्य स्थिति की तरह ही इस्तेमाल करता है, लेकिन उसे स्थायित्व की सुविधा अपने-आप मिल जाती है।

localStorage पढ़ना समकालिक काम है, इसलिए आपको इसे हर रेंडर पर नहीं करना चाहिए। useState को एक फ़ंक्शन दें, जिसे आलसी आरंभीकरण कहते हैं, ताकि पढ़ने का काम माउंट होने पर केवल एक बार हो।

उस फ़ंक्शन के भीतर आप सहेजे गए मान को पार्स करते हैं या दिया गया डिफ़ॉल्ट मान लौटाते हैं।

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

localStorage पढ़ते समय इससे हर रेंडर पर मुख्य थ्रेड का दोहराया जाने वाला समकालिक काम बच जाता है।

अपडेट को स्थायी रूप से सहेजने के लिए एक useEffect जोड़ें, जो मान बदलने पर चलता है और localStorage.setItem(key, JSON.stringify(value)) को कॉल करता है।

निर्भरता सारणी में मान रखने से स्थिति में होने वाला हर बदलाव अपने-आप भंडारण में लिख दिया जाता है।

जब पिछली मान के आधार पर मान सेट करना हो, तो फ़ंक्शनल रूप setValue(prev => prev + 1) का उपयोग करें। इससे पुराने क्लोज़र की समस्या नहीं होती, जिसमें पहले कैप्चर किया गया मान लिखा जा सकता था।

यह उन इवेंट हैंडलर और इफ़ेक्ट के भीतर विशेष रूप से महत्वपूर्ण है, जो पुरानी स्थिति की प्रति कैप्चर कर सकते हैं।

जब कुंजी मौजूद नहीं होती, तो getItem null लौटाता है। आपके आरंभीकरण फ़ंक्शन को इसका पता लगाकर null को पार्स करने के बजाय डिफ़ॉल्ट मान पर लौटना चाहिए।

stored != null ? JSON.parse(stored) : defaultValue जैसा सुरक्षा-जाँच तरीका पहली बार आने वाले उपयोगकर्ता को सहज अनुभव देता है।

TypeScript में आप हुक को जेनेरिक बना सकते हैं: function useLocalStorage<T>(key: string, initial: T)। इससे मान का प्रकार सुरक्षित रहता है और इसका उपयोग करने वाले को पूरा प्रकार-सुरक्षा लाभ मिलता है।

लौटने वाले युग्म का प्रकार [T, Dispatch<SetStateAction<T>>] होता है, जो useState से मेल खाता है।

समय के साथ आपके डेटा की संरचना बदलती है और पुराने सहेजे गए मान नए कोड को बाधित कर सकते हैं। डेटा के साथ एक संस्करण कुंजी भी सहेजें, ताकि पुराने प्रारूपों का पता लगाया जा सके।

उदाहरण के लिए, { संस्करण: 2, डेटा } सहेजें और पढ़ते समय संस्करण की तुलना करें।

जब सहेजा गया संस्करण वर्तमान संस्करण से मेल न खाए, तो पुराने मान पर भरोसा करने के बजाय उसे हटा दें या नए प्रारूप में बदल दें। सबसे सरल तरीका है कि पुराने प्रविष्टि को हटा दें और डिफ़ॉल्ट मानों पर लौट आएँ।

इससे आपके ऐप के पुराने संस्करण द्वारा लिखे गए डेटा से होने वाली त्रुटियाँ रुकती हैं।

एक पूरा useLocalStorage आलसी आरंभीकरण फ़ंक्शन को जोड़ता है, जो सुरक्षित रूप से पढ़ता और पार्स करता है; ऐसा सेट करने वाला फ़ंक्शन, जो फ़ंक्शनल अपडेट का समर्थन करता है; और एक useEffect, जो संस्करण प्रबंधन के साथ भंडारण में लिखता है।

इसका परिणाम useState का ऐसा विकल्प है जिसे सीधे इस्तेमाल किया जा सकता है और जो पुनः लोड के बाद भी बना रहता है।

आपने आलसी आरंभीकरण फ़ंक्शन वाला useLocalStorage हुक बनाना, useEffect के माध्यम से बदलावों को स्थायी रूप से सहेजना, पुराने क्लोज़र से बचने के लिए फ़ंक्शनल अपडेट का उपयोग करना और null मानों को सँभालना सीखा।

आपने TypeScript के जेनेरिक प्रकार और पुराने डेटा को सुरक्षित रूप से हटाने के लिए संस्करण प्रबंधन भी देखा।