रिएक्ट कॉन्टेक्स्ट एपीआई एक राज्य प्रबंधन उपकरण है जिसका उपयोग रिएक्ट घटकों में डेटा साझा करने के लिए किया जाता है। कार्यात्मक घटकों में प्रमाणीकृत उपयोगकर्ताओं का ट्रैक रखने के लिए संदर्भ API का उपयोग करने का तरीका जानें।

प्रतिक्रिया प्रसंग एपीआई क्या है?

रिएक्ट एक घटक-आधारित पुस्तकालय है। इसके अनुप्रयोगों में शामिल हैं विभिन्न घटक जो एक साथ काम करते हैं। कुछ मामलों में, आपके एप्लिकेशन को इन घटकों में डेटा साझा करने की आवश्यकता होती है।

उदाहरण के लिए, आप वर्तमान उपयोगकर्ता का उपयोगकर्ता नाम साझा करना चाह सकते हैं लॉग इन करें आपके आवेदन में अन्य घटकों के लिए घटक। प्रसंग घटक ट्री में प्रत्येक घटक के माध्यम से डेटा पास करने की आवश्यकता को समाप्त करके उपयोगकर्ता नाम साझा करना आसान बनाता है।

आपको प्रतिक्रिया संदर्भ API का उपयोग कब करना चाहिए?

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

उपयोगकर्ता प्रमाणीकरण स्थिति का ट्रैक रखने के लिए संदर्भ का उपयोग करना

यदि आपका एप्लिकेशन प्रमाणीकरण का उपयोग करता है, तो इसके कई घटकों को वर्तमान उपयोगकर्ता की प्रमाणीकरण स्थिति जानने की आवश्यकता होगी। प्रत्येक घटक के लिए प्रमाणीकरण स्थिति को पास करना बेमानी है और प्रोप ड्रिलिंग की ओर जाता है इसलिए संदर्भ का उपयोग करना एक अच्छा विकल्प है।

क्रिएट कॉन्टेक्स्ट ()

Context API के साथ आरंभ करने के लिए, आपको सबसे पहले इस सिंटैक्स का उपयोग करके इसे बनाना होगा।

कॉन्स संदर्भ = React.createContext (डिफ़ॉल्ट वैल्यू);

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

प्रदाता

प्रत्येक संदर्भ में एक प्रदाता होता है जो उन घटकों द्वारा उपभोग किया गया मान प्राप्त करता है जो इसे लपेटता है। यह इन घटकों को संदर्भ परिवर्तनों की सदस्यता लेने की अनुमति देता है।

उपयोग प्रसंग

कॉन्टेक्स्ट का उपयोग करें () एक है प्रतिक्रिया हुक जो घटकों को संदर्भ का उपभोग करने की अनुमति देता है। आपको केवल संदर्भ में पारित करने की आवश्यकता है।

कॉन्स्ट संदर्भवैल्यू = उपयोग कॉन्टेक्स्ट (संदर्भ)

आइए अब प्रमाणीकरण स्थिति का ट्रैक रखने के लिए प्रमाणीकरण संदर्भ बनाएं।

एक नई फ़ाइल बनाकर प्रारंभ करें, AuthContext.js, और निम्नलिखित जोड़ें।

"प्रतिक्रिया" से आयात { createContext };
कॉन्स्ट ऑथकॉन्टेक्स्ट = createContext ();
निर्यात डिफ़ॉल्ट AuthContext;

अगला, बनाएं AuthProvider.js और प्रदाता समारोह जोड़ें।

'प्रतिक्रिया' से आयात {useState, useEffect};
आयात {getUser} './auth.js' से
'./AuthContext' से AuthContext आयात करें
एक्सपोर्ट कॉन्स्ट ऑथप्रोवाइडर = ({बच्चों}) => {
 कॉन्स [उपयोगकर्ता, सेटयूसर] = यूज़स्टेट (अशक्त);
 उपयोग प्रभाव (() => {
 कॉन्स्ट करंट यूज़र = गेटयूज़र ()
 सेट यूज़र (वर्तमान यूज़र)
 }, []);
वापसी (
{बच्चे}
 );
 };

यहां, आप वर्तमान उपयोगकर्ता को नकली से पुनर्प्राप्त कर रहे हैं गेट यूज़र () समारोह। एक वास्तविक अनुप्रयोग में, यह आपकी बैकएंड सेवा होगी।

किसी भी परिवर्तन का ट्रैक रखने के लिए उपयोगकर्ता को वर्तमान स्थिति में संग्रहीत करें और फिर उपयोगकर्ता को प्रदाता को मूल्य प्रोप में पास करें।

AuthProvider.js संदर्भ तक पहुंच के साथ बच्चों को भी प्राप्त करता है।

अगला कदम एक कस्टम हुक बनाना है जो प्रदाता के साथ लिपटे घटकों को संदर्भ तक पहुंचने की अनुमति देगा।

एक नई फ़ाइल बनाएँ useAuthContext.js और निम्नलिखित जोड़ें।

"./AuthContext" से AuthContext आयात करें;
const useAuthContext.js = () => {
 कॉन्स उपयोगकर्ता = उपयोग कॉन्टेक्स्ट (AuthContext);
 अगर (उपयोगकर्ता अपरिभाषित) {
 नई त्रुटि फेंकें ("useAuthContext का उपयोग केवल AuthProvider के अंदर किया जा सकता है");
 }
 वापसी उपयोगकर्ता;
};

अब अगर प्रदाता के बाहर का कोड कॉल करता है AuthContext, आपका आवेदन त्रुटि को इनायत से संभालेगा।

अंतिम चरण के साथ संदर्भ का उपयोग करके घटकों को लपेटना है AuthProvider.js.

आयात { AuthProvider } "./AuthContext" से;
ReactDOM.render(




,
 जड़ तत्व
);

यहां एक उदाहरण दिया गया है कि आप किसी पृष्ठ को अनधिकृत उपयोगकर्ताओं से बचाने के लिए संदर्भ का उपयोग कैसे करेंगे।

आयात useAuthContext "./useAuthContext" से;
"रिएक्ट-राउटर-डोम" से आयात {नेविगेट};
कॉन्स्ट प्रोफाइल = () => {
 कॉन्स्ट {उपयोगकर्ता} = useAuthContext ();
 अगर (! उपयोगकर्ता) {
 वापसी ;
 }
 वापसी (
 <>
प्रोफ़ाइल

 );
};

यह घटक सशर्त रूप से प्रस्तुत करता है उपयोगकर्ता की प्रमाणीकरण स्थिति के आधार पर प्रोफ़ाइल पृष्ठ। यह जाँचता है कि क्या उपयोगकर्ता मौजूद है और यदि वे नहीं करते हैं, तो उन्हें लॉगिन पृष्ठ पर पुनर्निर्देशित करता है। अन्यथा, यह प्रोफाइल पेज प्रस्तुत करता है।

जब प्रतिक्रिया प्रसंग एपीआई का उपयोग नहीं करना है

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

ReactJS में प्रॉप्स का उपयोग कैसे करें

आगे पढ़िए

लेखक के बारे में