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

अनिवार्य रूप से, राज्य प्रबंधक वांछित परिणाम उत्पन्न करने के लिए ऐप्स को डेटा तक पहुंचने और संसाधित करने की अनुमति देते हैं। Next.js अनेक राज्य प्रबंधन समाधानों के लिए सहायता प्रदान करता है। हालाँकि, इस गाइड में, हम राज्य प्रबंधन के लिए Redux टूलकिट के उपयोग पर ध्यान केंद्रित करेंगे।

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

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

Reduxis को व्यापक रूप से राज्य प्रबंधन समाधान के रूप में अपनाया गया है विभिन्न जावास्क्रिप्ट ढाँचे. हालाँकि, यह जटिलताएँ ला सकता है, विशेषकर छोटी परियोजनाओं के लिए।

एक सामान्य कमी एक्शन प्रकार, एक्शन क्रिएटर्स और रिड्यूसर को परिभाषित करने के लिए दोहरावदार बॉयलरप्लेट कोड लिखने की आवश्यकता है। इससे कोड अतिरेक बढ़ सकता है।

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

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

1. अपने टर्मिनल में नीचे दिए गए कमांड को चलाकर स्थानीय रूप से एक नया Next.js प्रोजेक्ट बनाएं:

   एनपीएक्स क्रिएट-नेक्स्ट-ऐप@लेटेस्ट नेक्स्ट-रिडक्स-टूलकिट

2. प्रोजेक्ट बनाने के बाद, प्रोजेक्ट डायरेक्टरी में जाकर नेविगेट करें:

   सीडी नेक्स्ट-रिडक्स-टूलकिट

3. अंत में, अपने प्रोजेक्ट में आवश्यक निर्भरताएँ स्थापित करें एनपीएम, नोड पैकेज मैनेजर.

   एनपीएम @reduxjs/टूलकिट रिएक्ट-रिडक्स इंस्टॉल करें

एक बार जब आप एक बुनियादी Next.js प्रोजेक्ट सेट कर लेते हैं, तो अब आप एक डेमो Next.js एप्लिकेशन बनाने के लिए तैयार हैं जो राज्य प्रबंधन के लिए Redux टूलकिट का उपयोग करता है।

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं गिटहब रिपॉजिटरी.

Redux स्टोर को कॉन्फ़िगर करें

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

Redux स्टोर बनाने के लिए, एक नया बनाएं redux आपके Next.js प्रोजेक्ट की रूट डायरेक्टरी में फ़ोल्डर। इस फ़ोल्डर के अंदर, एक नया बनाएं स्टोर.जे.एस फ़ाइल करें और निम्नलिखित कोड जोड़ें:

आयात {कॉन्फ़िगरस्टोर} से'@reduxjs/टूलकिट';
आयात प्रोफाइलरिड्यूसर से'./रेड्यूसर/प्रोफाइलस्लाइस';
निर्यातगलती करना कॉन्फिगरस्टोर({
 रेड्यूसर:{
 प्रोफाइल: प्रोफाइलरिड्यूसर
 }
})

उपरोक्त कोड का उपयोग करता है कॉन्फिगरस्टोर Redux स्टोर बनाने और कॉन्फ़िगर करने का कार्य। स्टोर कॉन्फ़िगरेशन में इसका उपयोग करके रेड्यूसर निर्दिष्ट करना शामिल है कम करने वस्तु।

इस मामले में, रेड्यूसर निर्दिष्ट करते हैं कि विशेष कार्यों या निर्दिष्ट घटनाओं के जवाब में एप्लिकेशन की स्थिति कैसे बदलनी चाहिए। इस उदाहरण में, प्रोफ़ाइल रेड्यूसर प्रोफाइल स्थिति से संबंधित कार्यों के प्रबंधन के लिए जिम्मेदार है।

Redux स्टोर की स्थापना करके, कोड Redux टूलकिट का उपयोग करके एप्लिकेशन की स्थिति को प्रबंधित करने के लिए मुख्य संरचना स्थापित करता है।

राज्य स्लाइस को परिभाषित करें

Redux राज्य स्लाइस ऐसे घटक हैं जो कॉन्फ़िगर किए गए redux स्टोर के भीतर विशिष्ट डेटा आइटम की स्थिति को प्रबंधित करने के लिए तर्क को समाहित करते हैं। ये स्लाइस का उपयोग करके बनाए गए हैं createSlice फ़ंक्शन, जो स्वचालित रूप से स्लाइस के लिए रिड्यूसर, एक्शन क्रिएटर्स और एक्शन प्रकार उत्पन्न करता है।

में redux निर्देशिका, एक नया फ़ोल्डर बनाएं और उसे नाम दें कम करने वाली. इस फ़ोल्डर के अंदर, बनाएं प्रोफ़ाइलस्लाइस.जे.एस फ़ाइल, और निम्न कोड जोड़ें।

आयात {createSlice} से'@reduxjs/टूलकिट';
कॉन्स्ट प्रोफाइलस्लाइस = क्रिएटस्लाइस({
 नाम: 'प्रोफ़ाइल',
 आरंभिक राज्य: {
 नाम: 'कोई नहीं'
 },
 रेड्यूसर: {
 नाम भरें: (अवस्था, क्रिया) => {
 राज्य.नाम = कार्रवाई.पेलोड
 }
}})
निर्यातकॉन्स्ट {SET_NAME} = प्रोफ़ाइलस्लाइस.क्रियाएँ;
निर्यातगलती करना प्रोफ़ाइलस्लाइस.रेड्यूसर;

दिए गए कोड में, createSlice फ़ंक्शन उपयोगकर्ता प्रोफ़ाइल स्थिति के लिए एक स्टेट स्लाइस बनाता है। प्रोफाइलस्लाइस ऑब्जेक्ट में स्लाइस और उसके नाम शामिल हैं आरंभिक राज्य, जिसमें राज्य संपत्तियों के लिए डिफ़ॉल्ट मान शामिल हैं।

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

createSlice फ़ंक्शन परिभाषित रिड्यूसर के आधार पर स्वचालित रूप से एक्शन क्रिएटर्स और एक्शन प्रकार उत्पन्न करता है। निर्यात किया गया नाम भरें एक्शन क्रिएटर और प्रोफ़ाइलस्लाइस.रेड्यूसर प्रोफ़ाइल स्लाइस के लिए जेनरेट किए गए एक्शन क्रिएटर और रिड्यूसर फ़ंक्शन का प्रतिनिधित्व करता है।

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

आरटीके की राज्य प्रबंधन कार्यक्षमता का परीक्षण करने के लिए एक घटक बनाएं

खोलें सूचकांक.जे.एस फ़ाइल में पृष्ठों निर्देशिका, बॉयलरप्लेट नेक्स्ट.जेएस कोड हटाएं, और निम्नलिखित कोड जोड़ें।

आयात शैलियों से'@/styles/Home.module.css'
आयात {useRef} से'प्रतिक्रिया'
आयात {उपयोग चयनकर्ता, उपयोग डिस्पैच} से'प्रतिक्रिया-रिडक्स'
आयात {नाम भरें} से'../../redux/reducers/profileSlice'
समारोहप्रदर्शित होने वाला नाम(){
कॉन्स्ट {नाम} = उपयोग चयनकर्ता((राज्य) => राज्य.प्रोफ़ाइल)
वापस करना (

 मैं {नाम} हूँ!!</h1> 
 ) }
निर्यातगलती करनासमारोहघर() {
कॉन्स्ट इनपुटनाम = उपयोगRef()
कॉन्स्ट प्रेषण = उपयोगडिस्पैच()
समारोहसबमिटनाम() {
सांत्वना देना.लॉग (inputName.current.value)
 प्रेषण (SET_NAME(inputName.current.value))
 }
वापस करना (
 <>

'नाम दर्ज करें' रेफरी={इनपुटनाम} />
नाम दर्ज करें</button>

 </main>
 </>
 )}

उपरोक्त कोड एक Next.js घटक बनाता और प्रस्तुत करता है जो उपयोगकर्ता को एक नाम दर्ज करने और ब्राउज़र के पेज पर दिए गए नाम को प्रदर्शित करने की अनुमति देता है। Redux टूलकिट का उपयोग करके एप्लिकेशन की स्थिति को प्रभावी ढंग से प्रबंधित करना।

प्रदर्शित होने वाला नाम घटक का उपयोग करता है चयनकर्ता का उपयोग करें तक पहुँचने के लिए हुक नाम Redux स्टोर में प्रोफ़ाइल स्थिति से संपत्ति और इसे पृष्ठ पर प्रस्तुत करता है।

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

_app.js फ़ाइल को अद्यतन करें

अंत में, संपूर्ण Next.js एप्लिकेशन में उपयोग के लिए Redux टूलकिट को कॉन्फ़िगर करने के लिए, आपको एप्लिकेशन को इसके साथ लपेटना होगा Redux प्रदाता—यह सुनिश्चित करता है कि Redux स्टोर और उपलब्ध स्थितियाँ इसके सभी घटकों के लिए पहुंच योग्य हैं आवेदन पत्र।

खोलें _app.js फ़ाइल करें और इसे इस प्रकार अद्यतन करें:

आयात {प्रदाता} से'प्रतिक्रिया-रिडक्स'
आयात इकट्ठा करना से'../../redux/store'
निर्यातगलती करनासमारोहअनुप्रयोग({घटक, पेजप्रॉप्स }) {
वापस करना (


 </प्रदाता> )
}

अब, आगे बढ़ें और आपके द्वारा किए गए परिवर्तनों को प्रतिबिंबित करने और नेविगेट करने के लिए विकास सर्वर प्रारंभ करें http://localhost: 3000 एप्लिकेशन का परीक्षण करने के लिए अपने ब्राउज़र में।

एनपीएम रन डेव

पृष्ठ पुनः लोड पर डेटा पुनर्जलीकरण को संभालना

पृष्ठ पुनः लोड पर डेटा पुनर्जलीकरण, पृष्ठ पुनः लोड होने पर एप्लिकेशन की स्थिति को पुनर्स्थापित करने और प्रारंभ करने की प्रक्रिया को संदर्भित करता है। सर्वर-रेंडर नेक्स्ट.जेएस एप्लिकेशन में, प्रारंभिक स्थिति को पहले सर्वर पर प्रस्तुत किया जाता है और फिर क्लाइंट को भेजा जाता है।

क्लाइंट पर, जावास्क्रिप्ट कोड सर्वर से प्राप्त क्रमबद्ध स्थिति को पुनर्प्राप्त और डीसेरिएलाइज़ करके एप्लिकेशन स्थिति के पुनर्निर्माण के लिए जिम्मेदार है।

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

Next.js अनुप्रयोगों में Redux टूलकिट का उपयोग करने के फायदों में से एक इसकी सादगी और डेवलपर-अनुकूल विशेषताएं हैं। यह क्रियाओं, रिड्यूसर और स्टोर कॉन्फ़िगरेशन को परिभाषित करने के लिए आवश्यक बॉयलरप्लेट कोड को काफी कम कर देता है, जिससे राज्य प्रबंधन में Redux के साथ काम करना आसान और अधिक कुशल हो जाता है।