रिएक्ट हुक + कॉन्टेक्स्ट एपीआई रिएक्ट + रेडक्स की तुलना में बेहतर विकल्प क्यों है?
Redux हमारे कोडबेस में बहुत अधिक जटिलता का परिचय देता है, जिसमें अत्यधिक मात्रा में कोड की आवश्यकता होती है। सबसे अच्छा, यह इसे रिएक्ट अनुप्रयोगों में राज्य प्रबंधन के लिए एक अपूर्ण समाधान बनाता है। और फिर भी, बहुत से रिएक्ट डेवलपर्स अन्य विकल्पों पर विचार किए बिना राज्य प्रबंधन के लिए Redux के लिए डिफ़ॉल्ट हैं।
इस लेख में, मैं राज्य प्रबंधन के लिए रिएक्ट कॉन्टेक्स्ट एपीआई पेश करूंगा, और आपको दिखाऊंगा कि रिएक्ट हुक प्लस कॉन्टेक्स्ट एपीआई रेडक्स की तुलना में बेहतर समाधान क्या है।
हमें राज्य प्रबंधन उपकरण की आवश्यकता क्यों है
ठेठ प्रतिक्रिया में, डिस्कनेक्ट किए गए घटकों के बीच डेटा को संभालने का तरीका प्रोप ड्रिलिंग के माध्यम से होता है। चूंकि कोई वैश्विक स्थिति नहीं है कि घटक एक्सेस कर सकते हैं, उदाहरण के लिए, आप शीर्ष-स्तरीय घटक से पांचवें-स्तर के घटक में डेटा पास करना चाहते हैं, तो आपको डेटा को पेड़ के प्रत्येक स्तर पर एक प्रोप के रूप में पास करना होगा जब तक आप अपने वांछित घटक तक नहीं पहुंच जाते।
इसके परिणामस्वरूप एक टन अतिरिक्त कोड लिखा जाता है, और उन घटकों को गुण देना जिनका वे कभी उपयोग नहीं करेंगे, उनके वास्तुशिल्प डिजाइन को भी प्रभावित करते हैं। इस समस्या को हल करने के लिए, हमें एक वैश्विक स्थिति प्रदान करने का एक तरीका चाहिए था कि सभी घटक, चाहे वे कितने भी गहरे घोंसले में हों, एक्सेस कर सकें।
इसे हल करके, Redux, एप्लिकेशन स्थिति के प्रबंधन के लिए एक ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी, रिएक्ट डेवलपर्स के लिए जाने-माने समाधान बन गया।
रेडक्स कैसे काम करता है
NS Redux प्रलेखन इसे जावास्क्रिप्ट अनुप्रयोगों के लिए एक पूर्वानुमेय राज्य कंटेनर के रूप में वर्णित करता है जो हमें ऐसे अनुप्रयोगों को लिखने में मदद करता है जो लगातार व्यवहार करते हैं, विभिन्न वातावरणों में चलते हैं, और परीक्षण करने में आसान हैं।
प्रोप ड्रिलिंग का एक नुकसान शीर्ष-स्तरीय घटक से डेटा तक पहुंचने के लिए काफी मात्रा में अतिरिक्त कोड लिखने की आवश्यकता है। Redux के साथ, यह नुकसान और भी अधिक महसूस किया जाता है क्योंकि हमारे आवेदन के लिए वैश्विक स्थिति स्थापित करने के लिए आवश्यक सभी अतिरिक्त कोड के साथ बहुत अधिक जटिलता आती है। रेडक्स को कार्य करने के लिए तीन मुख्य भवन भागों की आवश्यकता होती है: क्रियाएं, रेड्यूसर, और स्टोर।
http www fxnetworks com सक्रिय
कार्रवाई
ये ऐसी वस्तुएं हैं जिनका उपयोग Redux स्टोर पर डेटा भेजने के लिए किया जाता है। उनके पास आम तौर पर दो गुण होते हैं: एक प्रकार की संपत्ति जो यह बताती है कि कार्रवाई क्या करती है और एक पेलोड संपत्ति जिसमें वह जानकारी होती है जिसे ऐप स्थिति में बदला जाना चाहिए।
// action.js const reduxAction = payload => { return { type: 'action description', payload } }; export default reduxAction; |_+_| आमतौर पर सभी कैप्स में होता है, इसके शब्दों को अंडरस्कोर द्वारा अलग किया जाता है। उदाहरण के लिए |_+_| या |_+_|.
कम करने वाली
ये शुद्ध कार्य हैं जो क्रिया व्यवहार को लागू करते हैं। वे वर्तमान एप्लिकेशन स्थिति लेते हैं, एक क्रिया करते हैं, और फिर एक नया राज्य लौटाते हैं:
typeदुकान
स्टोर वह जगह है जहां एप्लिकेशन का राज्य रखा गया है। किसी भी Redux एप्लिकेशन में केवल एक ही स्टोर होता है:
SIGNUP_USERचूंकि हमारे एप्लिकेशन में केवल एक Redux स्टोर हो सकता है, हमारे सभी घटकों के लिए एक रूट रेड्यूसर बनाने के लिए, हमें |_+_| Redux से विधि।
इस लंबी प्रक्रिया और Redux को स्थापित करने के लिए आवश्यक कोड की काफी मात्रा के साथ, कल्पना करें कि जब हमारे पास काम करने के लिए कई घटक होंगे तो हमारा कोडबेस कैसा दिखेगा। भले ही Redux हमारी राज्य प्रबंधन समस्या को हल करता है, लेकिन इसका उपयोग करने में वास्तव में समय लगता है, सीखने की अवस्था कठिन है, और हमारे आवेदन में जटिलता की एक पूरी नई परत पेश करता है।
सौभाग्य से, रिएक्ट कॉन्टेक्स्ट एपीआई इस समस्या को हल करता है। रिएक्ट हुक के साथ संयुक्त होने पर, हमारे पास एक राज्य प्रबंधन समाधान होता है जिसे स्थापित करने में कम समय लगता है, इसमें एक आसान सीखने की अवस्था होती है, और इसके लिए न्यूनतम कोड की आवश्यकता होती है।
प्रतिक्रिया प्रसंग API
नया कॉन्टेक्स्ट एपीआई रिएक्ट 16.3 के साथ आया है। यहां बताया गया है कि प्रसंग को कैसे समझाया गया है प्रतिक्रिया दस्तावेज :
कॉन्टेक्स्ट हर स्तर पर मैन्युअल रूप से प्रॉप्स को पास किए बिना कंपोनेंट ट्री के माध्यम से डेटा पास करने का एक तरीका प्रदान करता है।
रिएक्ट संदर्भ एपीआई कई घटकों में राज्य के प्रबंधन का रिएक्ट का तरीका है जो सीधे जुड़े नहीं हैं।
संदर्भ बनाने के लिए, हम |_+_| . का उपयोग करेंगे प्रतिक्रिया से विधि, जो इसके डिफ़ॉल्ट मान के लिए एक पैरामीटर स्वीकार करता है:
DELETE_USER_DATA|_+_| विधि किसी वस्तु को |_+_| . के साथ लौटाती है और एक |_+_| अवयव:
const reducer = (state, action) => { const { type, payload } = action; switch(type){ case 'action type': return { ['action description']: payload }; default: return state; } }; export default reducer; |_+_| घटक वह है जो राज्य को सभी बाल घटकों के लिए उपलब्ध कराता है, चाहे वे घटक पदानुक्रम के भीतर कितने भी गहरे हों। |_+_| घटक प्राप्त करता है |_+_| सहारा यह वह जगह है जहाँ हम अपना वर्तमान मूल्य पारित करेंगे:
import { createStore } from 'redux' const store = createStore(componentName); |_+_|, जैसा कि इसके नाम का तात्पर्य है, |_+_| . से डेटा की खपत करता है प्रोप ड्रिलिंग की आवश्यकता के बिना:
[combineReducers](https://redux.js.org/api/combinereducers)हुक के बिना, संदर्भ एपीआई Redux की तुलना में बहुत अधिक नहीं लग सकता है, लेकिन |_+_| के साथ संयुक्त है। हुक, हमारे पास एक समाधान है जो अंततः राज्य प्रबंधन समस्या को हल करता है।
प्रतिक्रिया में हुक क्या हैं?
हुक एक प्रकार का फ़ंक्शन है जो आधार कोड में कस्टम कोड के निष्पादन को सक्षम बनाता है। रिएक्ट में, हुक विशेष कार्य हैं जो हमें इसकी मुख्य विशेषताओं में शामिल होने की अनुमति देते हैं।
रिएक्ट हुक हमें कार्यात्मक घटकों से राज्य प्रबंधन को आसानी से संभालने की अनुमति देकर वर्ग-आधारित घटकों को लिखने का विकल्प प्रदान करता है।
|_+_| अंकुड़ा
यदि आपने देखा है, तो रिएक्ट कॉन्टेक्स्ट एपीआई की व्याख्या करते समय, हमें अपनी सामग्री को |_+_| . में लपेटने की आवश्यकता है घटक और फिर एक बच्चे के रूप में एक फ़ंक्शन पास करें ताकि हम अपने राज्य तक पहुंच (या उपभोग) कर सकें। यह अनावश्यक घटक घोंसले का परिचय देता है और हमारे कोड की जटिलता को बढ़ाता है।
|_+_| हुक चीजों को बहुत अच्छा और सीधा बनाता है। इसका उपयोग करके अपने राज्य तक पहुँचने के लिए, हमें बस इसे अपने बनाए गए |_+_| . के साथ कॉल करना होगा इसके तर्क के रूप में:
netflix.com/active tv
createContextअब, हमारी सामग्री को |_+_| . में लपेटने के बजाय घटक, हम केवल |_+_| . के माध्यम से अपने राज्य तक पहुंच सकते हैं चर।
|_+_| अंकुड़ा
|_+_| हुक रिएक्ट 16.7.0 के साथ आया। बिल्कुल |_+_| . की तरह जावास्क्रिप्ट में विधि, |_+_| हुक अपने तर्क के रूप में दो मान प्राप्त करता है - इस मामले में, वर्तमान स्थिति और एक क्रिया - और फिर एक नया राज्य देता है:
import React from 'react'; const newContext = React.createContext({ color: 'black' }); उपरोक्त ब्लॉक में, हमने अपने राज्य और संबंधित विधि को परिभाषित किया है, |_+_|, इसे संभालते हुए। जब हम |_+_| . कहते हैं विधि, |_+_| हुक |_+_| . के आधार पर एक क्रिया करेगा कि हमारी विधि अपने क्रिया तर्क में प्राप्त करती है:
createContext|_+_| हुक प्लस संदर्भ API
हमारे स्टोर की स्थापना
अब जब हम जानते हैं कि कैसे Context API और |_+_| व्यक्तिगत रूप से काम करें, आइए देखें कि जब हम अपने आवेदन के लिए आदर्श वैश्विक राज्य प्रबंधन समाधान प्राप्त करने के लिए उन्हें जोड़ते हैं तो क्या होता है। हम अपनी वैश्विक स्थिति एक |_+_| . में बनाएंगे फ़ाइल:
Providerहमारे में |_+_| फ़ाइल, हमने इस्तेमाल किया |_+_| से विधि |_+_| जिसे हमने पहले एक नया संदर्भ बनाने के लिए समझाया था। याद रखें कि |_+_| विधि किसी वस्तु को |_+_| . के साथ लौटाती है और |_+_| अवयव। इस बार, हम केवल |_+_| . का उपयोग करेंगे घटक और फिर |_+_| हुक जब हमें अपने राज्य तक पहुंचने की आवश्यकता होती है।
ध्यान दें कि हमने |_+_| . का उपयोग कैसे किया हमारे में हुक करो |_+_|। जब हमें अपने राज्य में हेरफेर करने की आवश्यकता होगी, तो हम |_+_| विधि और वांछित के साथ एक वस्तु में पास |_+_| इसके तर्क के रूप में।
हमारे |_+_| में, हमने अपना |_+_| . लौटा दिया एक |_+_| . के साथ घटक |_+_| . का सहारा और |_+_| से |_+_| हुक।
विश्व स्तर पर हमारे राज्य में प्रवेश
विश्व स्तर पर अपने राज्य तक पहुंचने के लिए, हमें अपनी जड़ को लपेटना होगा |_+_| हमारे |_+_| . में घटक इसे हमारे |_+_| . में प्रस्तुत करने से पहले समारोह:
Consumerअब, हमारा स्टोर |_+_| घटक ट्री में किसी भी घटक से पहुँचा जा सकता है। ऐसा करने के लिए, हम |_+_| . आयात करेंगे से हुक |_+_| और |_+_| हमारे |_+_| . से फ़ाइल:
const { Provider, Consumer } = newContext; हमारे राज्य से डेटा जोड़ना और हटाना
हमने देखा है कि हम अपनी वैश्विक स्थिति तक कैसे पहुंच सकते हैं। हमारे राज्य से डेटा जोड़ने और हटाने के लिए, हमें |_+_| . की आवश्यकता होगी हमारे द्वारा विधि |_+_| संदर्भ। हमें केवल |_+_| . पर कॉल करने की आवश्यकता है विधि और किसी ऑब्जेक्ट में पास करें |_+_| (क्रिया विवरण जैसा कि हमारे |_+_| घटक में परिभाषित किया गया है) इसके पैरामीटर के रूप में:
__में__पायथन
Providerनिष्कर्ष
काफी हद तक, Redux रिएक्ट अनुप्रयोगों में राज्य प्रबंधन के लिए काम करता है और इसके कुछ फायदे हैं, लेकिन इसकी वाचालता इसे चुनना वास्तव में कठिन बना देती है, और इसे हमारे आवेदन में काम करने के लिए आवश्यक अतिरिक्त कोड का टन बहुत सारी अनावश्यक जटिलता का परिचय देता है .
दूसरी ओर, |_+_| . के साथ एपीआई और रिएक्ट हुक, हमारे ऐप को काम करने के लिए बाहरी पुस्तकालयों को स्थापित करने या फाइलों और फ़ोल्डरों का एक गुच्छा जोड़ने की कोई आवश्यकता नहीं है। यह रिएक्ट अनुप्रयोगों में वैश्विक राज्य प्रबंधन को संभालने के लिए इसे बहुत सरल, अधिक सरल तरीका बनाता है।
#Redux #React #JavaScript #WebDev