द यूजरेड्यूसर हुक: रिएक्ट में स्टेट मैनेजमेंट को सरल बनाना

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

useReducer हुक जटिल अवस्थाओं और संक्रमणों के प्रबंधन के लिए एक संरचित कार्यप्रणाली प्रदान करता है। गले लगाना useReducer हुक लचीलेपन और दक्षता को अनलॉक करता है, जिससे क्लीनर कोड प्राप्त होता है।

यूज़रेड्यूसर हुक को समझना

useReducer हुक रिएक्ट द्वारा प्रदान की गई एक इनबिल्ट विशेषता है जो रेड्यूसर पैटर्न के सिद्धांतों का पालन करके राज्य प्रबंधन को सुव्यवस्थित करती है। यह आपको एक संगठित और स्केलेबल विकल्प प्रदान करता है useState हुक, विशेष रूप से जटिल राज्यों को संभालने के लिए अनुकूल है।

का लाभ उठाकर useReducer हुक, आप एक ही रेड्यूसर फ़ंक्शन के भीतर राज्य और उसके संक्रमण दोनों को समेकित कर सकते हैं।

यह फ़ंक्शन वर्तमान स्थिति और इनपुट के रूप में एक क्रिया लेता है, बाद में नई स्थिति का निर्माण करता है। यह जावास्क्रिप्ट में नियोजित रिड्यूसर फ़ंक्शन के समान सिद्धांतों पर काम करता है Array.prototype.reduce () तरीका।

सिंटैक्स और उदाहरण useReducer हुक का उपयोग

उपयोग करने के लिए वाक्य रचना useReducer हुक इस प्रकार है:

कॉन्स्ट [राज्य, प्रेषण] = useReducer (reducer, initialState);

useReducer फ़ंक्शन दो तर्क स्वीकार करता है:

• रिड्यूसर (फ़ंक्शन): वर्तमान स्थिति और प्रेषित कार्रवाई के आधार पर राज्य को अद्यतन करने का तरीका निर्धारित करता है।
• प्रारंभिक अवस्था (कोई भी): घटक के लिए प्रारंभिक राज्य मान का प्रतिनिधित्व करता है।

आह्वान करने पर, useReducer हुक दो तत्वों से मिलकर एक सरणी देता है:

• राज्य (कोई भी): वर्तमान स्थिति मान को दर्शाता है।
• प्रेषण (फ़ंक्शन): यह फ़ंक्शन स्थिति को अद्यतन करने के लिए क्रियाओं को भेजने में सक्षम बनाता है।

के उपयोग को दर्शाने वाले नीचे दिए गए उदाहरण पर विचार करें useReducer एक साधारण काउंटर के प्रबंधन में हुक:

आयात प्रतिक्रिया, {useReducer} से'प्रतिक्रिया';
कॉन्स्ट प्रारंभिक स्थिति = 0;
कॉन्स्ट कम करने वाला = (अवस्था, क्रिया) => {
बदलना (प्रक्रिया का प्रकार) {
मामला'वृद्धि':
वापस करना राज्य + 1;
मामला'कमी':
वापस करना राज्य - 1;
गलती करना:
वापस करना राज्य;
 }
};
कॉन्स्ट काउंटर = () => {
कॉन्स्ट [गणना, प्रेषण] = useReducer (reducer, initialState);
कॉन्स्ट संभाल वृद्धि = () => {
 प्रेषण({ प्रकार: 'वृद्धि' });
 };
कॉन्स्ट हैंडलडिक्रीमेंट = () => {
 प्रेषण({ प्रकार: 'कमी' });
 };
वापस करना (



वृद्धि</button>
{गणना करें/span>
कमी</button>
 </div>
 );
};

उपरोक्त दृष्टांत से, की एक प्रारंभिक अवस्था 0 दो प्रकार की कार्रवाइयों को संभालने के लिए ज़िम्मेदार एक रेड्यूसर फ़ंक्शन के साथ परिभाषित किया गया है: वेतन वृद्धि और घटती. रिड्यूसर फ़ंक्शन निर्दिष्ट क्रियाओं के अनुसार राज्य को विधिवत रूप से संशोधित करता है।

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

एक रेड्यूसर फ़ंक्शन का निर्माण

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

आमतौर पर, एक रिड्यूसर फ़ंक्शन एक स्विच सशर्त बयान नियोजित करता है विभिन्न क्रिया प्रकारों को संभालने और तदनुसार राज्य संशोधनों को प्रभावी बनाने के लिए।

टूडू सूची के प्रबंधन के लिए उपयोग किए जाने वाले रेड्यूसर फ़ंक्शन के नीचे दिए गए उदाहरण पर विचार करें:

कॉन्स्ट प्रारंभिक स्थिति = [];
कॉन्स्ट कम करने वाला = (अवस्था, क्रिया) => {
बदलना (प्रक्रिया का प्रकार) {
मामला'जोड़ना':
वापस करना [...राज्य, कार्रवाई.पेलोड];
मामला'टॉगल':
वापस करना राज्य.नक्शा ((ऐसा करने के लिए) =>
 todo.id कार्रवाई.पेलोड? { ...ऐसा करने के लिए, पुरा होना: !todo.completed}: todo
 );
मामला'मिटाना':
वापस करना राज्य फ़िल्टर ((ऐसा करने के लिए) => todo.id !== action.payload);
गलती करना:
वापस करना राज्य;
 }
};

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

के मामले में टॉगल कार्रवाई, यह वैकल्पिक है पुरा होना निर्दिष्ट आईडी से जुड़े टूडू आइटम की संपत्ति। मिटाना कार्रवाई, दूसरी ओर, राज्य सरणी से प्रदान की गई आईडी से जुड़े टूडू आइटम को हटा देती है।

यदि कोई भी क्रिया प्रकार मेल नहीं खाता है, तो रिड्यूसर फ़ंक्शन वर्तमान स्थिति को अपरिवर्तित लौटाता है।

भेजने की क्रिया

द्वारा सुविधा प्राप्त राज्य अद्यतनों को प्रभावित करने के लिए useReducer हुक, कार्यों का प्रेषण अनिवार्य हो जाता है। क्रियाएँ सादे जावास्क्रिप्ट वस्तुओं का प्रतिनिधित्व करती हैं जो वांछित प्रकार के राज्य संशोधन को स्पष्ट करती हैं।

इन क्रियाओं को संभालने और बाद की स्थिति उत्पन्न करने की जिम्मेदारी रिड्यूसर फ़ंक्शन के पास होती है।

प्रेषण समारोह, द्वारा सुसज्जित useReducer हुक, कार्यों को भेजने के लिए कार्यरत है। यह एक क्रिया वस्तु को एक तर्क के रूप में स्वीकार करता है, जिससे प्रासंगिक राज्य अद्यतन को बढ़ावा मिलता है।

पिछले उदाहरणों में, क्रियाओं को सिंटैक्स का उपयोग करके भेजा गया था प्रेषण ({प्रकार: 'कार्रवाई प्रकार'}). हालाँकि, क्रियाओं के लिए पूरक डेटा को शामिल करना बोधगम्य है, जिसे के रूप में जाना जाता है पेलोड, जो अपडेट से संबंधित और जानकारी प्रदान करता है। उदाहरण के लिए:

प्रेषण({ प्रकार: 'जोड़ना', पेलोड: { पहचान: 1, मूलपाठ: 'गृहकार्य खत्म करो', पुरा होना: असत्य } });

इस परिदृश्य में, जोड़ना कार्रवाई में राज्य में शामिल किए जाने वाले नए टूडू आइटम के विवरणों को समाहित करने वाला एक पेलोड ऑब्जेक्ट शामिल है।

यूजरेड्यूसर के साथ कॉम्प्लेक्स स्टेट का प्रबंधन

की असली ताकत useReducer हुक जटिल राज्य संरचनाओं को प्रबंधित करने की अपनी क्षमता में निहित है, जिसमें कई परस्पर जुड़े मूल्य और जटिल राज्य संक्रमण शामिल हैं।

रेड्यूसर फ़ंक्शन के भीतर राज्य तर्क को केंद्रीकृत करके, विभिन्न प्रकार के कार्यों का प्रबंधन और राज्य का व्यवस्थित अद्यतन एक व्यवहार्य प्रयास बन जाता है।

एक परिदृश्य पर विचार करें जहां a प्रतिक्रिया प्रपत्र में कई इनपुट फ़ील्ड होते हैं. प्रत्येक इनपुट की स्थिति को व्यक्तिगत रूप से प्रबंधित करने के बजाय useState, द useReducer फॉर्म स्टेट को समग्र रूप से प्रबंधित करने के लिए हुक को नियोजित किया जा सकता है।

रिड्यूसर फ़ंक्शन विशिष्ट क्षेत्रों के संशोधन और पूरे फॉर्म के व्यापक सत्यापन के लिए उपयुक्त क्रियाओं को कुशलता से संभाल सकता है।

कॉन्स्ट प्रारंभिक अवस्था = {
 नाम: '',
 ईमेल: '',
 पासवर्ड: '',
 isFormValid: असत्य,
};
कॉन्स्ट कम करने वाला = (अवस्था, क्रिया) => {
बदलना (प्रक्रिया का प्रकार) {
मामला'अपडेट फ़ील्ड':
वापस करना {...स्टेट, [एक्शन.पेलोड.फील्ड]: एक्शन.पेलोड.वैल्यू};
मामला'वैलिडेट फॉर्म':
वापस करना { ...राज्य, isFormValid: कार्रवाई.पेलोड};
गलती करना:
वापस करना राज्य;
 }
};

उदाहरण में, रेड्यूसर फ़ंक्शन दो अलग-अलग क्रिया प्रकारों को पूरा करता है: अपडेट फ़ील्ड और ValidateForm. अपडेट फ़ील्ड क्रिया प्रदान किए गए मूल्य का उपयोग करके राज्य के भीतर एक विशिष्ट क्षेत्र के संशोधन की सुविधा प्रदान करती है।

इसके विपरीत, ValidateForm क्रिया अद्यतन करता है isFormValid प्रदान किए गए सत्यापन परिणाम के आधार पर संपत्ति।

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

अन्य राज्य प्रबंधन समाधानों के साथ यूज़रेड्यूसर की तुलना करना

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

useState

useState हुक एक घटक के भीतर सरल, पृथक अवस्थाओं के प्रबंधन के लिए पर्याप्त है। की तुलना में इसका वाक्य-विन्यास अधिक संक्षिप्त और सीधा है useReducer. फिर भी, जटिल राज्य या राज्य परिवर्तनों के लिए, useReducer अधिक संगठित दृष्टिकोण प्रदान करता है।

रेडक्स

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

Redux जटिल राज्य प्रबंधन आवश्यकताओं की आवश्यकता वाले बड़े पैमाने के अनुप्रयोगों के लिए आदर्श साबित होता है। हालाँकि, छोटी परियोजनाओं या सरल राज्य प्रबंधन आवश्यकताओं के लिए, useReducer एक हल्के और सरल विकल्प के रूप में काम कर सकता है।

प्रसंग एपीआई

रिएक्ट का कॉन्टेक्स्ट एपीआई राज्य को साझा करने में सक्षम बनाता है प्रोप ड्रिलिंग का सहारा लिए बिना कई घटकों में। के साथ संयोजन के रूप में useReducer, यह एक केंद्रीकृत राज्य प्रबंधन समाधान प्राप्त कर सकता है।

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

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

मध्यम आकार की परियोजनाओं के लिए, useReducer Redux या Context API का एक प्रभावी और सरल विकल्प साबित हो सकता है।

राज्य प्रबंधन की सादगी को उजागर करना

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

जब useState हुक के साथ मिलकर उपयोग किया जाता है, तो useReducer एक हल्के विकल्प के रूप में काम कर सकता है रेडक्स या कॉन्टेक्स्ट एपीआई जैसे पुस्तकालय, विशेष रूप से छोटे से मध्यम आकार के संदर्भ में परियोजनाओं।