रिएक्ट Redux क्या है और आप इसका उपयोग कैसे करते हैं?

Redux एक मुक्त राज्य प्रबंधन पुस्तकालय है जो जावास्क्रिप्ट अनुप्रयोगों के फ्रंट-एंड पर काम करता है, UI के भीतर प्रत्येक घटक की स्थिति का प्रबंधन करता है। Redux लाइब्रेरी उस कोड के बीच अलगाव की सुविधा प्रदान करती है जो एक एप्लिकेशन में डेटा को प्रबंधित और संग्रहीत करता है, और कोड जो किसी एप्लिकेशन के UI के विभिन्न घटकों पर घटनाओं और उनके प्रभावों का प्रबंधन करता है।

Redux के मुख्य विक्रय बिंदुओं में से एक यह है कि यह लचीला है। आप लगभग किसी भी जावास्क्रिप्ट ढांचे या पुस्तकालय के साथ Redux का उपयोग कर सकते हैं।

Redux टीम ने Redux, React-Redux और Redux Toolkit नाम के तीन पुस्तकालय बनाए हैं। आपके रिएक्ट विकास अनुभव का अधिकतम लाभ उठाने के लिए सभी तीन पुस्तकालय एक साथ काम करते हैं, और इस ट्यूटोरियल लेख में, आप उनका उपयोग करना सीखेंगे।

रिएक्ट-रेडक्स का महत्व

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

रिएक्ट-रेडक्स, रिएक्ट अनुप्रयोगों के लिए आधिकारिक रेडक्स यूआई बाध्यकारी पुस्तकालय है, और इसे रेडक्स टीम द्वारा बनाए रखा जाता है।

सम्बंधित: जावास्क्रिप्ट के साथ अपना पहला रिएक्ट ऐप कैसे बनाएं

अपनी परियोजना निर्देशिका में Redux स्थापित करना

आपके रिएक्ट एप्लिकेशन में Redux लाइब्रेरी तक पहुँच प्राप्त करने के दो तरीके हैं। Redux टीम द्वारा अनुशंसित दृष्टिकोण एक नया रिएक्ट प्रोजेक्ट बनाते समय निम्नलिखित कमांड का उपयोग करना है:

npx क्रिएट-रिएक्शन-ऐप my-app --template redux

ऊपर दिया गया कमांड Redux टूलकिट, रिएक्ट-रेडक्स और Redux स्टोर को स्वचालित रूप से कॉन्फ़िगर करता है। हालाँकि, यदि आप किसी मौजूदा रिएक्ट प्रोजेक्ट में Redux का उपयोग करना चाहते हैं, तो आप निम्न कमांड के साथ Redux लाइब्रेरी को एक निर्भरता के रूप में स्थापित कर सकते हैं:

एनपीएम रेडक्स स्थापित करें

रिएक्ट-रेडक्स बाइंडिंग UI लाइब्रेरी द्वारा अनुसरण किया गया:

npm प्रतिक्रिया-रिडक्स स्थापित करें

और Redux टूलकिट:

npm @ reduxjs/टूलकिट स्थापित करें

Redux टूलकिट पुस्तकालय भी महत्वपूर्ण है क्योंकि यह Redux स्टोर विन्यास प्रक्रिया को त्वरित और आसान बनाता है।

Redux स्टोर बनाना

Redux लाइब्रेरी के साथ काम करना शुरू करने से पहले, आपको Redux स्टेट कंटेनर (या स्टोर) बनाना होगा। Redux स्टोर बनाना आवश्यक है क्योंकि यह वह ऑब्जेक्ट है जो वैश्विक Redux एप्लिकेशन स्थिति को संग्रहीत करता है।

रिएक्ट, अधिकांश फ्रंट-एंड फ्रेमवर्क की तरह, इसके अनुप्रयोगों में एक प्रवेश बिंदु होता है, जो शीर्ष स्तर पर एक फाइल या फाइलों का समूह होता है। index.html तथा index.js फाइलें दो फाइलें हैं जो एक रिएक्ट ऐप के शीर्ष स्तर पर हैं, जो ऊपर है ऐप.जेएस फ़ाइल और ऐप के सभी घटक।

ऐसा index.js फ़ाइल Redux स्टोर बनाने के लिए आदर्श स्थान है।

Redux Store के साथ index.js को अपडेट करना

'प्रतिक्रिया' से आयात प्रतिक्रिया
'रिएक्ट-डोम' से रिएक्टडॉम आयात करें
'./App' से ऐप आयात करें
आयात रिपोर्टवेबविटल्स "./reportWebVitals" से
"@reduxjs/toolkit" से {configureStore} इंपोर्ट करें
'रिएक्शन-रेडक्स' से आयात {प्रदाता}
'./reducers/user' से उपयोगकर्ता आयात करें
कॉन्स्ट स्टोर = कॉन्फ़िगरस्टोर ({
 रेड्यूसर: {
 उपयोगकर्ता
 }
})
ReactDOM.render(




,
 document.getElementById ('रूट')
)
रिपोर्टवेबविटल्स ();

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

आपके रिएक्ट एप्लिकेशन को पता नहीं चलेगा कि Redux स्टोर किसके बिना मौजूद है प्रदाता घटक, जो रिएक्ट-रेडक्स बाइंडिंग लाइब्रेरी से आता है। प्रदाता घटक एक एकल प्रोप (स्टोर) लेता है और खुद को रिएक्ट ऐप के चारों ओर लपेटता है, जिससे Redux स्टोर विश्व स्तर पर सुलभ हो जाता है।

में तीसरा और अंतिम नया आयात index.js ऊपर फ़ाइल है उपयोगकर्ता कम करने वाला, जो आपके Redux स्टोर के संचालन के लिए अत्यंत महत्वपूर्ण है।

रेड्यूसर क्यों महत्वपूर्ण है?

एक रेड्यूसर का उद्देश्य बदलना है a यूआई घटक राज्य एक पर आधारित की गई क्रिया. उदाहरण के लिए, यदि आप एक ऑनलाइन स्कूल एप्लिकेशन बना रहे हैं, तो आपको साइन-इन घटक का उपयोग करके एक्सेस प्राप्त करने के लिए प्रत्येक उपयोगकर्ता को एप्लिकेशन में साइन इन करना होगा। इस एप्लिकेशन के लिए एक और बढ़िया घटक एक सक्रिय उपयोगकर्ता घटक है, जो आपके एप्लिकेशन में साइन इन करने पर प्रत्येक उपयोगकर्ता का नाम या ईमेल पता प्रदर्शित करेगा।

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

उपयोगकर्ता रेड्यूसर बनाना

"@reduxjs/toolkit" से { createSlice } आयात करें;
एक्सपोर्ट कॉन्स यूजरस्लाइस = क्रिएट स्लाइस ({
 नाम: "उपयोगकर्ता",
 प्रारंभिक स्थिति: {मान: {ईमेल: ""}},
 कम करने वाले: {
 लॉगिन: (राज्य, क्रिया) => {
 State.value = action.payload
 },
 }
})
निर्यात कास्ट {लॉगिन} = userSlice.actions
निर्यात डिफ़ॉल्ट userSlice.reducer;

रिएक्ट के भीतर एसआरसीनिर्देशिका आप एक बना सकते हैं रेड्यूसर निर्देशिका, जहां आप अपना स्टोर करेंगे उपयोगकर्ता कम करने वाला और कोई अन्य रेड्यूसर जिसे आप अपने Redux स्टोर में जोड़ना चाहते हैं। user.js ऊपर फ़ाइल आयात करता है क्रिएटस्लाइस Redux टूलकिट से कार्य करता है।

क्रिएटस्लाइस समारोह स्वीकार करता है a नाम, एक प्रारम्भिक अवस्था, और ए कम करने वाली वस्तु जो कई रिड्यूसर फंक्शन्स को स्टोर करता है। हालाँकि, ऊपर दिए गए रिड्यूसर ऑब्जेक्ट में केवल एक रिड्यूसर फ़ंक्शन होता है जिसे कहा जाता है लॉग इन करें जो एक राज्य और एक क्रिया को तर्क के रूप में लेता है और एक नया राज्य लौटाता है।

User.js फ़ाइल लॉगिन रिड्यूसर को निर्यात करती है। साइन-इन घटक इसे आयात करता है और इसका उपयोग करता है डिस्पैच का उपयोग करें () हुक

साइन-इन घटक बनाना

'प्रतिक्रिया' से आयात प्रतिक्रिया;
'@ मुई/सामग्री/लिंक' से आयात लिंक;
'@ मुई/सामग्री/टेक्स्टफिल्ड' से टेक्स्टफिल्ड आयात करें;
'@ मुई/सामग्री/टाइपोग्राफी' से टाइपोग्राफी आयात करें;
'@mui/material' से {बटन, बॉक्स} आयात करें;
'react-redux' से आयात {useDispatch};
'../reducers/user' से आयात {लॉगिन};
'प्रतिक्रिया' से आयात {useState};
फ़ंक्शन साइनिन () {
 कॉन्स्ट प्रेषण = उपयोग डिस्पैच ()
 कॉन्स्ट [ईमेल, सेटईमेल] = यूज़स्टेट ('')
 कॉन्स्ट हैंडल सबमिट करें = () => {
 प्रेषण (लॉगिन ({ईमेल: ईमेल}))
 }
वापसी (


एसएक्स = {{
मेरा: 8,
प्रदर्शन: 'फ्लेक्स',
फ्लेक्सडायरेक्शन: 'कॉलम',
संरेखित करें: 'केंद्र',
}}>
 दाखिल करना 
लेबल = "ईमेल पता"
आवश्यक
आईडी = "ईमेल"
नाम = "ईमेल"
मार्जिन = "सामान्य"
onChange={(e) => setEmail (e.target.value)}
/>
लेबल = "पासवर्ड"
आवश्यक
आईडी = "पासवर्ड"
नाम = "पासवर्ड"
टाइप = "पासवर्ड"
मार्जिन = "सामान्य"
/>
href="#"
एसएक्स = {{श्री: 12, एमबी: 2}}
>
पासवर्ड भूल गए?

संस्करण = "निहित"
एसएक्स = {{एमटी: 2}}
ऑनक्लिक = {हैंडल सबमिट}
>
दाखिल करना





);
}
डिफ़ॉल्ट साइन इन निर्यात करें;

उपरोक्त साइन-इन घटक उपयोग करता है एमयूआई पुस्तकालय. यह एक साधारण साइन-इन फॉर्म बनाता है जिसके लिए उपयोगकर्ता के ईमेल और पासवर्ड की आवश्यकता होती है। साइन-इन बटन पर क्लिक करने से a trigger ऑनक्लिक फ़ंक्शन, जो कॉल करेगा हैंडल सबमिट करें समारोह।

हैंडल सबमिट करें फ़ंक्शन का उपयोग करता है यूजस्टेट () तथा डिस्पैक्ट () का उपयोग करें के साथ हुक लॉगिन रेड्यूसर Redux स्टोर में एक सक्रिय उपयोगकर्ता का ईमेल पता उपलब्ध कराने के लिए। Redux स्टोर से, रिएक्ट ऐप के प्रत्येक घटक के पास अब एक सक्रिय उपयोगकर्ता के ईमेल तक पहुंच है।

सम्बंधित: हुक: प्रतिक्रिया का नायक निम्नलिखित सक्रिय उपयोगकर्ता घटक की मदद से एक सक्रिय उपयोगकर्ता के ईमेल पते को पुनः प्राप्त करता है उपयोग चयनकर्ता () हुक और इसे ऐप UI में रेंडर करता है।

ActiveUser.js फ़ाइल

"प्रतिक्रिया" से आयात प्रतिक्रिया;
"प्रतिक्रिया-रेडक्स" से आयात {उपयोग चयनकर्ता};
फंक्शन एक्टिव यूज़र () {
 const उपयोगकर्ता = उपयोग चयनकर्ता ((राज्य) => State.user.value)
 वापसी (


सक्रिय उपयोगकर्ता

 {user.email} 




 );
}

अपडेट किया गया ऐप.जेएस फ़ाइल

इस बिट कोड पर एक नज़र डालें:

"प्रतिक्रिया" से आयात प्रतिक्रिया; ActiveUsers को "./components/ActiveUsers" से आयात करें; "./components/Signin" से साइनइन आयात करें;
फ़ंक्शन ऐप () {
वापसी ( 
);
}
निर्यात डिफ़ॉल्ट ऐप; 

ऐप.जेएस उपरोक्त फ़ाइल आपके रिएक्ट एप्लिकेशन में सक्रिय उपयोगकर्ताओं और साइन-इन घटकों दोनों को आपके ब्राउज़र में निम्न आउटपुट बनाने के लिए प्रस्तुत करती है:

यदि कोई उपयोगकर्ता एप्लिकेशन में साइन इन करता है, तो सक्रिय उपयोगकर्ता घटक तुरंत एक नए सक्रिय उपयोगकर्ता ईमेल के साथ अपडेट हो जाएगा।

अपडेट किया गया UI

आपको रेडक्स का उपयोग कब करना चाहिए?

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

ऊपर दिए गए स्कूल के उदाहरण का उपयोग करते हुए, साइन-इन घटक, सक्रिय उपयोगकर्ता घटक, कक्षा प्रतिभागी घटक, और यहां तक ​​कि एक प्रोफ़ाइल घटक के लिए उपयोगकर्ता के ईमेल पते (या कुछ अन्य अद्वितीय .) की आवश्यकता होगी पहचानकर्ता)। यही कारण है कि Redux यहाँ सबसे अच्छा विकल्प है।

हालाँकि, यदि आपके पास एक ऐसा राज्य है जिसका उपयोग केवल एक या दो घटकों द्वारा किया जाता है, तो एक बेहतर विकल्प रिएक्ट प्रॉप्स हो सकता है।

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

यदि आप रिएक्टजेएस में प्रॉप्स का उपयोग करने के तरीके के बारे में सुझावों की तलाश कर रहे हैं, तो आप सही जगह पर हैं।

आगे पढ़िए

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