यदि आप अभी भी नहीं जानते हैं रेडक्स क्या है, इस लेख में हम इस लाइब्रेरी के बारे में वह सब कुछ समझाने पर ध्यान केंद्रित करने जा रहे हैं जो आपको जानना चाहिए जावास्क्रिप्ट, साथ ही इसके उपयोग, इसका उपयोग कैसे किया जा सकता है, आदि। इस तरह, आपके पास इसे अपने अगले जेएस प्रोजेक्ट्स में एकीकृत करने में सक्षम होने के लिए सभी आवश्यक उपकरण होंगे।
आइए देखें कि Redux कैसा है!
जावास्क्रिप्ट क्या है?
जावास्क्रिप्ट (जेएस), एक व्याख्यायित प्रोग्रामिंग भाषा है। इसे ईसीएमएस्क्रिप्ट मानक की एक बोली माना जाता है और इसकी विशेषता वस्तु-उन्मुख, प्रोटोटाइप-आधारित, अनिवार्य, कमजोर टाइप और गतिशील होना है। इसके नाम के बावजूद, इसे जावा के साथ भ्रमित नहीं किया जाना चाहिए। नेटस्केप नेविगेटर (लाइवस्क्रिप्ट के निर्माता) द्वारा सन माइक्रोसिस्टम्स (जावा के निर्माता) के अधिग्रहण और प्रोग्रामिंग भाषा के नाम परिवर्तन के बाद, इसका निर्माण व्यावसायिक विचारों पर आधारित है।
मुख्य रूप से ग्राहक पक्ष पर उपयोग किया जाता है, जो वेब ब्राउज़र का एक अभिन्न अंग है। यह आपको उपयोगकर्ता इंटरफ़ेस को बेहतर बनाने और गतिशील वेब पेज बनाने की अनुमति देता है। इसके अतिरिक्त, जावास्क्रिप्ट का उपयोग सर्वर साइड पर किया जा सकता है, जिसे सर्वर-साइड जावास्क्रिप्ट या एसएसजेएस के रूप में जाना जाता है। इसकी प्रयोज्यता वेब से परे, पीडीएफ दस्तावेज़ों और डेस्कटॉप अनुप्रयोगों, मुख्य रूप से विजेट्स आदि में उपयोग तक फैली हुई है।
La जावास्क्रिप्ट सिंटैक्स C++ और Java जैसी भाषाओं से मिलता जुलता है, हालाँकि यह जावा से नाम और परंपराएँ अपनाता है, इसलिए इसका नाम है। लेकिन, जैसा कि मैंने पहले उल्लेख किया है, यह ध्यान रखना महत्वपूर्ण है कि, उनके समान नाम के बावजूद, जावा और जावास्क्रिप्ट के अलग-अलग शब्दार्थ और उद्देश्य हैं।
दूसरी ओर, हमें यह याद रखना चाहिए कि जावास्क्रिप्ट दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) के कार्यान्वयन का उपयोग करता है, और वह JS एकमात्र प्रोग्रामिंग भाषा है जिसे ब्राउज़र मूल रूप से समझते हैं. प्रारंभ में, इसका उपयोग सर्वर तक पहुंच के बिना क्लाइंट पर संचालन के लिए HTML वेब पेजों में किया जाता था। हालाँकि, आज इसका उपयोग सर्वर से जानकारी भेजने और प्राप्त करने के लिए व्यापक रूप से किया जाता है, अक्सर AJAX जैसी तकनीकों के संयोजन में। उपयोगकर्ता एजेंट में जावास्क्रिप्ट की व्याख्या की जाती है जबकि विवरण HTML कोड के साथ डाउनलोड किए जाते हैं।
जेएस अनुप्रयोग
जावास्क्रिप्ट एक प्रोग्रामिंग भाषा है जिसका व्यापक रूप से विभिन्न अनुप्रयोगों और संदर्भों में उपयोग किया जाता है, जैसे:
- वेब विकास: वेब विकास में यह आवश्यक है। इसका उपयोग वेबसाइटों और वेब अनुप्रयोगों पर अन्तरक्रियाशीलता और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए किया जाता है। इसका उपयोग इंटरैक्टिव फॉर्म, दृश्य प्रभाव, वास्तविक समय डेटा सत्यापन और गतिशील नेविगेशन आदि के निर्माण में किया जाता है। के शामिल:
- वेब फ्रंट-एंड: यह फ्रंट-एंड विकास की आधारशिला है। रिएक्ट, एंगुलर और Vue.js जैसे फ्रेमवर्क और लाइब्रेरी वेब अनुप्रयोगों में इंटरैक्टिव और गतिशील यूजर इंटरफेस बनाने के लिए जावास्क्रिप्ट पर निर्भर हैं।
- वेब बैकएंड: Node.js जैसे प्लेटफ़ॉर्म के माध्यम से, संपूर्ण वेब एप्लिकेशन बनाने के लिए सर्वर साइड पर जावास्क्रिप्ट का उपयोग किया जाता है। यह डेवलपर को एप्लिकेशन के फ्रंट-एंड और बैक-एंड दोनों पर जावास्क्रिप्ट का उपयोग करने की अनुमति देता है, जिससे डेटा को सिंक्रनाइज़ करना और वास्तविक समय में एप्लिकेशन बनाना आसान हो जाता है।
- सर्वर अनुप्रयोग: हालांकि अन्य सर्वर-साइड भाषाओं की तरह सामान्य नहीं, जावास्क्रिप्ट का उपयोग Node.js के माध्यम से सर्वर एप्लिकेशन विकास में किया जाता है। यह वास्तविक समय के अनुप्रयोगों और बड़ी संख्या में समवर्ती अनुरोधों को संभालने वाले अनुप्रयोगों के लिए विशेष रूप से उपयोगी है।
- मोबाईल ऐप्स: इसका उपयोग रिएक्ट नेटिव और आयनिक जैसे फ्रेमवर्क का उपयोग करके हाइब्रिड मोबाइल एप्लिकेशन के विकास में किया जाता है। ये फ्रेमवर्क डेवलपर्स को एक बार लिखने और आईओएस और एंड्रॉइड जैसे कई प्लेटफार्मों पर एप्लिकेशन चलाने की अनुमति देते हैं।
- ऑनलाइन खेल: इसका उपयोग ऑनलाइन गेम और ब्राउज़र गेम के विकास में किया जाता है। फेज़र और थ्री.जेएस जैसी लाइब्रेरी ब्राउज़र में इंटरैक्टिव 2डी और 3डी गेम बनाना आसान बनाती हैं।
- डेस्कटॉप अनुप्रयोग: इलेक्ट्रॉन जैसे टूल के माध्यम से, HTML, CSS और JavaScript जैसी वेब तकनीकों का उपयोग करके क्रॉस-प्लेटफ़ॉर्म डेस्कटॉप एप्लिकेशन बनाना संभव है।
- ब्राउज़र एक्सटेंशन: वेब ब्राउज़र में अतिरिक्त कार्यक्षमता जोड़ने के लिए एक्सटेंशन का उपयोग किया जाता है। ये एक्सटेंशन आमतौर पर जावास्क्रिप्ट में लिखे जाते हैं।
- इंटरनेट ऑफ थिंग्स (IoT) अनुप्रयोग: एपीआई और विशेष पुस्तकालयों के माध्यम से हार्डवेयर और सेंसर के साथ संचार करने की क्षमता के कारण इसका उपयोग IoT उपकरणों के लिए एप्लिकेशन और सिस्टम विकसित करने में किया जाता है।
Redux क्या है और यह कैसे काम करता है?
Redux एक खुला स्रोत जावास्क्रिप्ट लाइब्रेरी है जिसका उपयोग अनुप्रयोगों में स्थिति को प्रबंधित करने के लिए किया जाता है, और एल्म कार्यात्मक भाषा से प्रभावित होता है। यूजर इंटरफेस बनाने के लिए इसे अक्सर अन्य लाइब्रेरी जैसे रिएक्ट या एंगुलर के साथ जोड़ा जाता है। इसकी कल्पना डैन अब्रामोव और एंड्रयू क्लार्क ने की थी, जो फ्लक्स नामक फेसबुक लाइब्रेरी से प्रेरित थे।
सामान्यतया, Redux एक छोटी लाइब्रेरी है सरल और सीमित एपीआई, एप्लिकेशन स्थिति के लिए एक पूर्वानुमानित कंटेनर के रूप में कार्य करने के लिए डिज़ाइन किया गया है। इसका संचालन कार्यात्मक प्रोग्रामिंग में "कम करें" की अवधारणा के समान है।
Redux का इतिहास बहुत पुराना है 2015, जब डैन अब्रामोव ने Redux का पहला संस्करण विकसित करना शुरू किया हॉट रीलोडिंग के बारे में रिएक्ट यूरोप सम्मेलन में भाषण देने की तैयारी करते समय। इस प्रक्रिया के दौरान, अब्रामोव ने फ्लक्स पैटर्न और रेड्यूसर फ़ंक्शन के बीच समानता देखी। इस अवलोकन से उन्हें आश्चर्य हुआ कि क्या फ्लक्स स्टोर वास्तव में एक रेड्यूसर फ़ंक्शन हो सकता है।
इस विचार को क्रियान्वित करने के लिए, अब्रामोव ने एंड्रयू क्लार्क से संपर्क किया, जो फ्लमॉक्स नामक फ्लक्स कार्यान्वयन के लेखक थे। उन्होंने मिलकर Redux को जीवंत बनाया और एक सुसंगत API को परिभाषित किया। इसके अतिरिक्त, उन्होंने करने की क्षमता को कार्यान्वित किया मिडलवेयर और स्टोर एन्हांसर्स का उपयोग करके विस्तार, जिसने वर्तमान Redux पारिस्थितिकी तंत्र में महत्वपूर्ण योगदान दिया, जिससे इसकी संभावनाओं का और विस्तार हुआ।
Redux और React संबंध: React क्या है
रिएक्ट एक जावास्क्रिप्ट लाइब्रेरी है जो यूजर इंटरफेस बनाने पर केंद्रित है, हालांकि इसकी बहुमुखी प्रतिभा उस परिभाषा से परे है। यह टूल, शुरुआत में फेसबुक द्वारा विकसित किया गया था, खुला स्रोत है और सिंगल पेज वेब एप्लिकेशन (एसपीए) और एंड्रॉइड एप्लिकेशन और आईओएस सहित विभिन्न एप्लिकेशन में उपयोगकर्ता इंटरफेस को तुरंत बनाने की क्षमता के कारण व्यापक रूप से उपयोग किया जाता है।
एंगुलर जैसे अन्य ढांचों के विपरीत, जो अधिक जटिल दृष्टिकोण प्रदान करते हैं, रिएक्ट है उपयोगकर्ता इंटरफ़ेस उत्पन्न करने की अपनी क्षमता के लिए जाना जाता है कुशलता से. इसे .jsx फ़ाइलों के उपयोग के माध्यम से प्राप्त किया जाता है, जो तर्क और उपयोगकर्ता इंटरफ़ेस को एक ही फ़ाइल में जोड़ती हैं और इकाइयों में व्यवस्थित होती हैं जिन्हें घटक कहा जाता है।
वर्चुअल डोम: यह क्या है?
जब हम ReactJS की दुनिया में उतरते हैं, तो हम संभवतः इसकी अवधारणा के बारे में अक्सर सुनते हैं वर्चुअल डोम. यह विचार एक सरल धारणा से उत्पन्न हुआ है: संपूर्ण वास्तविक DOM को अपडेट करने के बजाय, हम केवल उस हिस्से को संशोधित करते हैं जिसमें वास्तव में बदलाव की आवश्यकता है। पुराने जावास्क्रिप्ट अनुप्रयोगों में, हम सर्वर से JSON प्रारूप में डेटा प्राप्त करते थे और फिर प्रस्तुत करने के लिए एक पूर्ण नया HTML उत्पन्न करते थे, जिसके परिणामस्वरूप प्रत्येक संशोधन पर पूरा पृष्ठ ताज़ा हो जाता था।
अपने प्रोजेक्ट में Redux को कैसे स्थापित और कॉन्फ़िगर करें
अगर आप जानना चाहते हैं Redux कैसे स्थापित करेंसच तो यह है कि यह बिल्कुल भी जटिल नहीं है। ऐसा करने के लिए आपको टर्मिनल पर जाना होगा और वहां से आपको निम्नलिखित कमांड निष्पादित करना होगा:
एनपीएम आई-एस रिडक्स
अब आपके सिस्टम पर Redux का स्थिर संस्करण स्थापित है। बेशक, आपको संभवतः कुछ निर्भरताएँ हल करने की आवश्यकता होगी, जैसे कि npm, Node.js पैकेज मैनेजर स्थापित करना। एक बार यह पूरा हो जाने के बाद, हम अब रिएक्ट स्थापित करने जा रहे हैं, जिसके लिए आपको Redux का लाभ उठाने की भी आवश्यकता होगी, साथ ही अपने प्रोजेक्ट बनाना शुरू करने में सक्षम होने के लिए विकास टूल भी।
इन अन्य पैकेजों को स्थापित करने के लिए, आपको जिन आदेशों को निष्पादित करना होगा वे हैं:
एनपीएम आई -एस रिएक्ट-रिडक्स एनपीएम आई -डी रिडक्स-डेवटूल्स
अब आपके पास शुरू करने के लिए सब कुछ तैयार होगा। यदि आप मुख्य फ़ोल्डर या निर्देशिका पर जाते हैं जहां Redux स्थापित किया गया है, तो आप देखेंगे कि कई उपनिर्देशिकाएं या उपफ़ोल्डर हैं, जैसे स्टोर, रेड्यूसर, एक्शन, प्रकार। आपको पता होना चाहिए कि प्रत्येक क्या है:
- कार्रवाई: ये ऐसी वस्तुएं हैं जिनमें दो गुण होने चाहिए, एक जो क्रिया के प्रकार (TYPE) का वर्णन करता है और दूसरा जो बताता है कि ऐप की स्थिति में क्या बदला जाना चाहिए।
- कम करने वाली- रिड्यूसर ऐसे फ़ंक्शन हैं जो क्रियाओं के व्यवहार को लागू करते हैं। वे कार्रवाई के विवरण और स्थिति परिवर्तन के विवरण के आधार पर ऐप की स्थिति बदलते हैं।
- दुकान: वह स्थान है जहां क्रियाएं और रिड्यूसर मिलते हैं, ऐप की स्थिति को बनाए रखते हैं और बदलते हैं। वहां सिर्फ एक ही है।
- प्रकार: जैसा कि मैंने पहले कहा, यह क्रिया का प्रकार है।
व्यावहारिक उदाहरण: Redux के साथ एक एप्लिकेशन बनाना
Un Redux का उपयोग करके उदाहरण यह निम्नलिखित हो सकता है, जहां Redux का उपयोग करके एक सरल अकाउंटिंग ऐप बनाया जाता है। लेकिन ऐसा करने के लिए, आपको पहले Redux को कॉन्फ़िगर करना होगा और अपने कार्यों और रिड्यूसर को परिभाषित करना होगा:
// आयात Redux लाइब्रेरीज़ आयात { createStore } 'redux' से; // क्रियाओं को परिभाषित करें const इन्क्रीमेंटएक्शन = { प्रकार: 'इंक्रीमेंट' }; const decrementAction = { प्रकार: 'DECREMENT' }; // रिड्यूसर कॉन्स्ट काउंटररेड्यूसर को परिभाषित करें = (स्टेट = 0, एक्शन) => { स्विच (एक्शन.टाइप) { केस 'इंक्रीमेंट': रिटर्न स्टेट + 1; केस 'डिक्रीमेंट': वापसी स्थिति - 1; डिफ़ॉल्ट: वापसी स्थिति; } }; // Redux स्टोर बनाएं const स्टोर = createStore(counterReducer); // स्टोर में बदलाव के लिए सदस्यता लें store.subscribe(() => { console.log('वर्तमान काउंटर स्थिति:', store.getState()); }); // राज्य स्टोर को संशोधित करने के लिए प्रेषण क्रियाएं। डिस्पैच (incrementAction); स्टोर.डिस्पैच(incrementAction); स्टोर.डिस्पैच(decrementAction);
Redux का उपयोग कैसे करें इसका यह एक बहुत ही सरल उदाहरण है। एक बड़े ऐप में, आप अधिक जटिल क्रियाओं और रिड्यूसर को परिभाषित करेंगे और स्टोर की स्थिति तक पहुंचने और अपडेट करने के लिए रिएक्ट घटकों को कनेक्ट करेंगे। लेकिन कम से कम इससे आपको अंदाज़ा हो जाता है कि यह कैसे काम करता है...