प्रतिक्रियाशील मूल में AsyncStorage क्या है और इसका उपयोग कैसे करें?

रिएक्टिव नेटिव का AsyncStorage रिएक्टिव नेटिव ऐप में डेटा को स्टोर करना और बनाए रखना आसान बनाता है। AsyncStorage API के साथ, आप डिवाइस के स्थानीय स्टोरेज या जटिल स्टोरेज सिस्टम की आवश्यकता के बिना अपने ऐप के भीतर छोटे डेटा के साधारण मामलों को संभाल सकते हैं।

रिएक्टिव नेटिव का AsyncStorage क्या है?

AsyncStorage API एक स्थायी की-वैल्यू स्टोरेज सिस्टम है। एपीआई की एक श्रृंखला का समर्थन करता है जावास्क्रिप्ट डेटा प्रकार, जिसमें स्ट्रिंग, बूलियन, संख्या और JSON ऑब्जेक्ट शामिल हैं।

AsyncStorage का उपयोग करके संग्रहीत डेटा बना रहता है और ऐप के बंद होने या डिवाइस के पुनरारंभ होने पर भी उपलब्ध रहेगा। यह AsyncStorage को कैशिंग डेटा और कम मात्रा में एप्लिकेशन स्टेट को स्टोर करने के लिए एक आदर्श स्टोरेज सॉल्यूशन बनाता है।

AsyncStorage किस समस्या का समाधान कर रहा है?

AsyncStorage के आगमन से पहले, उचित डेटा कैशिंग एक अविश्वसनीय प्रयास था। आप या तो डेटा को स्थानीय स्टोरेज में स्टोर कर सकते हैं, जो आपके ऐप के बंद होने पर डेटा को बनाए रखने में असमर्थ है, या आप डेटा को रिलेशनल डेटाबेस मैनेजमेंट सिस्टम (RDBMS) में स्टोर कर सकते हैं। लेकिन वे इस उपयोग के मामले में काम करने के लिए बहुत जटिल हैं।

AsyncStorage प्रतिक्रियाशील मूल अनुप्रयोगों में छोटे और अस्थायी डेटा को संग्रहीत करने का एक सरल, विश्वसनीय तरीका प्रदान करके इन समस्याओं को हल करता है।

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

ये अतुल्यकालिक कार्यक्रम जो मुख्य जावास्क्रिप्ट थ्रेड को ब्लॉक किए बिना चलता है। उपयोगकर्ता सेटिंग्स और एप्लिकेशन स्थिति जैसे लगातार पहुंच की आवश्यकता वाले डेटा को संग्रहीत करने के लिए इसे आदर्श बनाना।

AsyncStorage के तरीके

स्थापित करने के लिए प्रतिक्रिया-देशी-async-storage पैकेज, अपने प्रोजेक्ट के टर्मिनल के अंदर निम्न कमांड चलाएँ:

एनपीएम इंस्टॉल @ रिएक्शन-नेटिव-एसिंक-स्टोरेज/एसिंक-स्टोरेज

चूंकि AsyncStorage प्रकृति में अतुल्यकालिक है, इसके तरीके तुरंत परिणाम नहीं लौटाएंगे। इसके बजाय, वे एक वादा लौटाते हैं जो ऑपरेशन पूरा होने पर हल हो जाता है।

आपको उपयोग करना चाहिए async/प्रतीक्षा करें AsyncStorage विधियों को कॉल करते समय सिंटैक्स या समान तकनीक।

डेटा लिखने के लिए setItem () और मल्टीसेट () विधियों का उपयोग करें

सेटआइटम () और मल्टीसेट () दिए गए कुंजी के मान सेट करने के लिए विधियों का उपयोग किया जाता है। ये विधियाँ कुंजी और मानों को पैरामीटर के रूप में स्वीकार करती हैं।

विधि एक वादा लौटाती है जो एक बूलियन मान के साथ हल करती है जो इंगित करती है कि ऑपरेशन सफल था या ऑपरेशन विफल होने पर त्रुटि के साथ अस्वीकार कर दिया गया था:

// कुंजी "उपयोगकर्ता" के लिए एक मान सहेजें
इंतजार AsyncStorage.setItem ('उपयोगकर्ता', 'जॉन');
// कुंजी "उपयोगकर्ता" के लिए एकाधिक मान सहेजें
इंतजार AsyncStorage.multiSet(['उपयोगकर्ता', 'जॉन', 'डो']);

GetItem() और multiGet() विधियों का उपयोग करके डेटा पढ़ें

साथ वस्तु ले आओ() विधि, आप जिस मूल्य को प्राप्त करना चाहते हैं, उसके लिए कुंजी का उपयोग करके भंडारण से सहेजे गए डेटा को खींच सकते हैं। यदि पास की गई कुंजी मौजूद नहीं है, तो वादा एक त्रुटि के साथ खारिज हो जाता है:

कॉन्स्ट नाम = इंतजार AsyncStorage.getItem ('उपयोगकर्ता');

द्वारा लौटाया गया मान वस्तु ले आओ() एक तार है। यदि आपको डेटा को किसी अन्य स्वरूप में संग्रहीत करने की आवश्यकता है, तो आप इसका उपयोग कर सकते हैं JSON.stringify () इसे संग्रहीत करने से पहले डेटा को एक स्ट्रिंग में बदलने के लिए। फिर प्रयोग करें JSON.पार्स () इसे पुनर्प्राप्त करते समय स्ट्रिंग को वापस मूल डेटा प्रकार में बदलने के लिए।

उदाहरण के लिए:

// कुंजी "उपयोगकर्ता" के लिए ऑब्जेक्ट {नाम: "जॉन डो", आयु: 30} सहेजें
इंतजार AsyncStorage.setItem ('उपयोगकर्ता', JSON.स्ट्रिफाई ({नाम: "जॉन डो", आयु: 30}));
// कुंजी "उपयोगकर्ता" के लिए वस्तु प्राप्त करें
कॉन्स्ट उपयोगकर्ता = JSON.पार्स (इंतजार AsyncStorage.getItem ('उपयोगकर्ता'));

आप भी इस्तेमाल कर सकते हैं मल्टीगेट () एकाधिक कुंजी-मूल्य जोड़े खींचने की विधि। विधि चाबियों की एक सरणी लेगी जो तार होनी चाहिए।

मर्जइटेम () और मल्टीमर्ज () विधियों का उपयोग करके डेटा मर्ज करें

मर्जइटम () और मल्टीमर्ज () विधियां दिए गए मान को दी गई कुंजी के मौजूदा मान के साथ मर्ज करती हैं। मान को पास किया गया मर्जइटम () किसी भी प्रकार का डेटा हो सकता है। हालांकि, यह ध्यान रखना महत्वपूर्ण है कि AsyncStorage डेटा को एन्क्रिप्ट नहीं करता है, इसलिए डिवाइस तक पहुंच रखने वाला कोई भी व्यक्ति डेटा पढ़ सकता है:

इंतजार AsyncStorage.mergeItem ('नाम', 'जेन डोए');

मर्जइटम () उस मान के लिए कुंजी लेता है जिसे आप मर्ज करना चाहते हैं और नए मान को आप कुंजी के मौजूदा मान के साथ मर्ज करना चाहते हैं। उपयोग मल्टीमर्ज () एक से अधिक आइटम को एक महत्वपूर्ण मान में मर्ज करने के लिए।

स्पष्ट () विधि का उपयोग करके संग्रहण साफ़ करें

साफ़() विधि आपको AsyncStorage में संग्रहीत सभी आइटम निकालने की अनुमति देती है। यह विभिन्न परिदृश्यों में उपयोगी हो सकता है, जैसे कि जब आपको उपयोगकर्ता लॉग-आउट के दौरान ऐप की स्थिति को रीसेट करने की आवश्यकता होती है या अपने मोबाइल फ़ोन पर कैश्ड डेटा साफ़ करें.

उदाहरण के लिए:

कॉन्स्ट डेटा साफ़ करें = async () => {
कोशिश {
इंतजार AsyncStorage.clear ();

 } पकड़ना (इ) {
सांत्वना देनात्रुटि (ई);
 }
};

उपरोक्त कोड AsyncStorage में संग्रहीत सभी कुंजी-मूल्य जोड़े को हटा देगा।

इसके अतिरिक्त, आप कॉलबैक फ़ंक्शन प्रदान कर सकते हैं साफ़(), जिसे ऑपरेशन पूरा होने के बाद लागू किया जाएगा:

AsyncStorage.clear ()
 ।तब(() => {
// क्लियर ऑपरेशन पूरा हुआ

 })
 ।पकड़ना((गलती) => {
सांत्वना देनात्रुटि (त्रुटि);
 });

ध्यान दें कि साफ़() विधि AsyncStorage में संग्रहीत सभी डेटा को स्थायी रूप से हटा देगी।

AsyncStorage के साथ कैशिंग डेटा

कैशिंग डेटा प्रदर्शन को बेहतर बनाने और नेटवर्क अनुरोधों को कम करने के लिए मोबाइल ऐप डेवलपमेंट में एक सामान्य अभ्यास है। AsyncStorage के साथ, आप रिएक्टिव नेटिव ऐप्स में डेटा को आसानी से कैश कर सकते हैं।

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

मान लें कि आपके पास एक ऐप है जो एपीआई से प्राप्त पुस्तकों की सूची प्रदर्शित करता है। प्रदर्शन बढ़ाने के लिए, आप AsyncStorage का उपयोग करके प्राप्त किए गए पुस्तक डेटा को कैश कर सकते हैं।

यहाँ इसका एक उदाहरण कार्यान्वयन है:

कॉन्स्ट [किताबें, सेटबुक्स] = यूज़स्टेट ([]);
उपयोग प्रभाव (() => {
कॉन्स्ट फ़ेचबुक्स = async () => {
कोशिश {
// जांचें कि कैश्ड डेटा मौजूद है या नहीं
कॉन्स्ट कैश्ड डेटा = इंतजार AsyncStorage.getItem ('संचित पुस्तकें');
अगर (कैश्डडेटा! == व्यर्थ) {
// यदि कैश्ड डेटा मौजूद है, तो पार्स करें और इसे प्रारंभिक स्थिति के रूप में सेट करें
 किताबों को संवारें(JSONपार्स (कैश्डडेटा));
 } अन्य {
// यदि कैश्ड डेटा मौजूद नहीं है, तो एपीआई से डेटा प्राप्त करें
कॉन्स्ट प्रतिक्रिया = इंतजार लाना(' https://api.example.com/books');
कॉन्स्ट डेटा = इंतजार प्रतिक्रिया.जेसन ();
// प्राप्त डेटा को कैश करें
इंतजार AsyncStorage.setItem ('संचित पुस्तकें', JSON.stringify (डेटा));
// प्राप्त किए गए डेटा को प्रारंभिक स्थिति के रूप में सेट करें
 सेटबुक (डेटा);
 }
 } पकड़ना (गलती) {
सांत्वना देनात्रुटि (त्रुटि);
 }
 };
 फ़ेचबुक्स ();
 }, []);

इस उदाहरण में, आप का उपयोग करें useEffect पुस्तक डेटा लाने के लिए हुक। के अंदर फ़ेच बुक्स फ़ंक्शन, जांचें कि कैश्ड डेटा कॉल करके मौजूद है या नहीं AsyncStorage.getItem('कैशबुक'). यदि कैश्ड डेटा मौजूद है, तो इसका उपयोग करके इसे पार्स करें JSON.पार्स और इसे प्रारंभिक स्थिति के रूप में उपयोग करके सेट करें किताबों को संवारें. यह आपको कैश्ड डेटा को तुरंत प्रदर्शित करने की अनुमति देता है।

यदि कैश्ड डेटा मौजूद नहीं है, फ़ेच () विधि का उपयोग करके एपीआई से डेटा प्राप्त करें. एक बार डेटा वापस आने के बाद, इसे कॉल करके कैश करें AsyncStorage.setItem (). फिर प्राप्त किए गए डेटा को प्रारंभिक स्थिति के रूप में सेट करें, यह सुनिश्चित करते हुए कि आगे के रेंडर प्राप्त किए गए डेटा को प्रदर्शित करेंगे।

अब आप कैश की गई पुस्तकों को इस प्रकार प्रदर्शित कर सकते हैं:

आयात प्रतिक्रिया, {उपयोग प्रभाव, उपयोग स्थिति} से'प्रतिक्रिया';
आयात {देखें, टेक्स्ट, फ्लैटलिस्ट} से'प्रतिक्रिया-मूल';
आयात AsyncStorage से'@react-native-async-storage/async-storage';
कॉन्स्ट ऐप = () => {
वापस करना (

पुस्तक सूची</Text>
 डेटा = {पुस्तकें}
 keyExtractor = {(आइटम) => item.id.toString ()}
 रेंडरआइटम={({आइटम}) => (

{आइटम.शीर्षक</Text>
{आइटम.लेखक</Text>
 </View>
 )}
 />
 </View>
 );
};
निर्यातगलती करना अनुप्रयोग;

आगे ऐप लॉन्च या स्क्रीन रीलोड अनावश्यक एपीआई अनुरोध किए बिना कैश्ड डेटा प्रदर्शित करेगा।

डायनेमिक डेटा लोडिंग के लिए AsyncStorage का उपयोग करना

प्रतिक्रियाशील मूल निवासी AsyncStorage डेटा को संग्रहीत करने और पुनर्प्राप्त करने के लिए एक शक्तिशाली समाधान प्रदान करता है। कैशिंग क्षमताओं का लाभ उठाते हुए, यह प्रदर्शन को बढ़ाता है और संग्रहीत डेटा तक तेजी से पहुंच प्रदान करता है।

जब आप AsyncStorage के ज्ञान को कस्टम पेजिनेशन जैसी तकनीकों के साथ जोड़ते हैं, तो आप अपने रिएक्टिव नेटिव ऐप में डेटा को गतिशील रूप से लोड और प्रदर्शित कर सकते हैं। यह बड़े डेटासेट के कुशल प्रबंधन के लिए सक्षम होगा।