Understanding Redux: Beginner's Guide to Modern State Management
Best free online courses

Understanding Redux: Beginner's Guide to Modern State Management

A Beginners Guide to Understanding Redux

रेडक्स को समझना: आधुनिक राज्य प्रबंधन के लिए शुरुआत की गाइड


इसलिए, आप जावास्क्रिप्ट जानते हैं। और आप प्रतिक्रिया की तरह फ्रंटएंड फ्रेमवर्क जानते हैं। आप दौड़ के लिए रवाना हो रहे हैं, अपने अद्भुत एकल पृष्ठ आवेदन का निर्माण और यह विस्तार ।

समय के साथ, आपका प्रतिक्रिया अनुप्रयोग अधिक जटिल हो जाता है, जिसमें अधिक ऐप घटक होते हैं, और अधिक डेटा अंदर और बाहर जा रहा है। अब आप मुद्दों में चल रहे हैं, और कई एक साथ प्रक्रियाओं का प्रबंधन सिरदर्द में बदल रहा है। आप यह सब लाइन में कैसे रखते हैं?

राज्य प्रबंधन क्या है?

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

आपके पास एक टोडो-आइटम घटक है, और आप घटक को प्रोग्राम करना चाहते हैं ताकि जब कोई उपयोगकर्ता आइटम पर क्लिक करे, तो वह पार हो जाए। आपके पास एक state variable हो सकता है जिसे IsFinished कहा जाता है और इसका मूल्य या True or False. IsFinished के मूल्य के आधार पर, टोडो-आइटम को पार करने के लिए प्रोग्राम किया जा सकता है।

राज्य प्रबंधन (State management) बस कई यूजर इंटरफेस नियंत्रण या घटकों की स्थिति का प्रबंधन है। चूंकि डेवलपर्स बड़े, अधिक जटिल अनुप्रयोगों पर काम करते हैं, इसलिए वे अपने आवेदन की स्थिति का बेहतर प्रबंधन करने के लिए बाहरी उपकरणों का उपयोग करना शुरू कर देते हैं। राज्य प्रबंधन को आसान बनाने के लिए, डेवलपर्स अक्सर राज्य प्रबंधन पुस्तकालयों का उपयोग करते हैं जो उन्हें अपने ऐप राज्य का मॉडल बनाने, घटकों की स्थिति को अपडेट करने, राज्य में परिवर्तनों की निगरानी और निरीक्षण करने और राज्य मूल्यों को पढ़ने की अनुमति देते हैं।

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

कुछ लोकप्रिय राज्य प्रबंधन उपकरण:

  • Redux
  • Vuex
  • Mobx
  • Apollo Link State
  • Unstated
  • Flux

रेडक्स क्या है, और हमें इसकी आवश्यकता क्यों है?

What is Redux, and why do we need it?

रेडक्स (Redux) जावास्क्रिप्ट अनुप्रयोगों के लिए एक हल्के राज्य प्रबंधन उपकरण है, जो 2015 में जारी किया गया था और डैन अब्रामोव और एंड्रयू क्लार्क द्वारा बनाया गया था।

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

इसके आधिकारिक दस्तावेज के अनुसार, रेडक्स (Redux) की स्थापना तीन मुख्य सिद्धांतों पर की गई थी:

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

आपके आवेदन की पूरी स्थिति के साथ एक स्थान पर केंद्रीकृत, प्रत्येक घटक के पास राज्य तक सीधी पहुंच है (कम से कम बच्चे के घटकों को सहारा भेजे बिना, या माता-पिता के घटकों को कॉलबैक कार्य)।

प्रतिक्रिया में शामिल हुक (hooks) कार्यक्षमता और संदर्भ एपीआई (Context API) के साथ, कुछ ने सवाल किया है कि क्या रेडक्स अभी भी एक बड़ा प्रतिक्रिया आवेदन बनाने के लिए आवश्यक है। जवाब हां में है। हालांकि आपको एक साधारण प्रतिक्रिया आवेदन के लिए इसकी आवश्यकता नहीं हो सकती है, आपको इसकी आवश्यकता होगी जब आपके आवेदन अधिक जटिल हो जाएंगे। संदर्भ एपीआई रेडक्स का प्रतिस्थापन नहीं है।

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

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

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

रेडक्स के लाभ और सीमाएं (Benefits and limitations of Redux)

  • राज्य हस्तांतरण (State transfer) - राज्य को एक ही स्थान पर एक साथ संग्रहीत किया जाता है जिसे 'स्टोर' कहा जाता है। जब आपको सभी राज्य चरों को 'स्टोर' में स्टोर करने की आवश्यकता नहीं होती है, तो यह विशेष रूप से महत्वपूर्ण होता है कि राज्य को कई घटकों द्वारा या अधिक जटिल वास्तुकला में साझा किया जा रहा है। जैसा कि आपका आवेदन बड़ा होता है, राज्य चर के स्रोत की पहचान करना तेजी से मुश्किल हो सकता है, यही कारण है कि एक 'स्टोर' उपयोगी है। यह आपको किसी भी घटक से राज्य डेटा को आसानी से कॉल करने की अनुमति देता है।
  • पूर्वानुमेयता (Predictability) - रेडक्स "जावास्क्रिप्ट ऐप्स के लिए एक उम्मीद के मुताबिक राज्य कंटेनर है। क्योंकि कम करने वाले शुद्ध कार्य हैं, एक ही परिणाम हमेशा उत्पादन किया जाएगा जब एक राज्य और कार्रवाई में पारित कर रहे हैं । इसके अलावा, राज्य के स्लाइस आपके लिए परिभाषित किए गए हैं, जिससे डेटा प्रवाह अधिक उम्मीद के मुताबिक हो जाता है।
  • रखरखाव (Maintainability) - रेडक्स कोड और राज्य को कैसे प्रबंधित किया जाना चाहिए, इसके लिए एक सख्त संरचना प्रदान करता है, जो वास्तुकला को किसी ऐसे व्यक्ति के लिए दोहराने और स्केल करने में आसान बनाता है जिसके पास रेडक्स के साथ पिछला अनुभव है।
  • परीक्षण और डिबगिंग में आसानी (Ease of testing and debugging) - रेडक्स आपके कोड का परीक्षण करना और डिबग करना आसान बनाता है क्योंकि यह रेडक्स देवटूल्स जैसे शक्तिशाली उपकरण प्रदान करता है जिसमें आप अपनी विकास प्रक्रिया को सुव्यवस्थित करने के लिए यात्रा करने, अपने परिवर्तनों को ट्रैक करने और बहुत कुछ कर सकते हैं।

जबकि रेडक्स कुछ ऐसा है जिसे हर डेवलपर को अपने आवेदन को विकसित करते समय उपयोग करने पर विचार करना चाहिए, यह हर किसी के लिए नहीं है। जब आप एक छोटे से आवेदन के साथ काम कर रहे हों तो अपने आवेदन के लिए रेडक्स आर्किटेक्चर स्थापित करना एक कठिन और प्रतीत होता है अनावश्यक प्रक्रिया हो सकती है। रेडक्स का उपयोग करना अनावश्यक ओवरहेड हो सकता है जब तक कि आपका कोई बड़ा एप्लिकेशन स्केलिंग न हो।

रेडक्स की मुख्य अवधारणाएं (Main concepts of Redux)

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

State Management Using Redux

मुक़दमा (Action)
 
कार्रवाई उस घटना के बारे में स्थिर जानकारी है जो राज्य परिवर्तन की शुरुआत करती है। जब आप Redux के साथ अपने state को अपडेट करते हैं, तो आप हमेशा एक कार्रवाई से शुरू करते हैं। क्रियाएँ एक प्रकार और एक वैकल्पिक payload युक्त Javascript objects के रूप में होती हैं।

कार्रवाई रचनाकारों (Action creators)

ये सरल कार्य हैं जो आपको क्रियाएं बनाने में मदद करते हैं। वे ऐसे कार्य हैं जो कार्रवाई की वस्तुओं को वापस करते हैं, और फिर, लौटाई गई वस्तु को आवेदन में विभिन्न कम करने वालों को भेजा जाता है।

कम करने वाला (Reducer)
 
एक रिड्यूसर एक शुद्ध कार्य है जो एक नए राज्य को वापस करके अपने राज्य में इनपुट परिवर्तन का ख्याल रखता है। रिड्यूसर पिछली स्थिति में ले जाएगा और मापदंडों के रूप में कार्रवाई करेगा और एप्लिकेशन स्थिति वापस करेगा। जैसे-जैसे आपका ऐप बढ़ता है, आपका एकल reducer छोटे रेड्यूसर में विभाजित हो जाएगा जो राज्य के पेड़ के कुछ हिस्सों का प्रबंधन करता है।

रेडक्स स्टोर (Redux store)

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

रेडक्स के साथ शुरू हो रही है (Getting started with Redux)

हालाँकि Redux का उपयोग अन्य जावास्क्रिप्ट लाइब्रेरियों जैसे Angular या Vue.js के साथ किया जाता है, लेकिन इसका उपयोग आमतौर पर React प्रोजेक्ट्स के लिए किया जाता है। आइए एक नजर डालते हैं रिएक्ट-रेडक्स के एक बुनियादी कार्यान्वयन पर।

import { createStore } from 'redux' function count(state = 0, action) { switch (action.type) { case 'increase': return state + 1 case 'decrease': return state - 1 default: return state } } let store = createStore(counter) store.subscribe(() => console.log(store.getState())) store.dispatch({ type: 'increase' }) store.dispatch({ type: 'decrease' })

  • Line 3 - 12: This implements a reducer, a pure function with (state, action) => state signature. The function transforms the initial state into the next state based on the action.type.
  • Line 14: Creates a Redux store, which holds the state of the app. Its API is { subscribe, dispatch, getState }. The createStore is part of the Redux library.
  • Line 16: subscribe() is used to update the UI in response to state changes.
  • Line 18 - 19: An action is dispatched to mutate the internal state.

संसाधनों (Resources)
 
अब, आप Redux के साथ पानी का परीक्षण शुरू करने के लिए तैयार महसूस कर सकते हैं, लेकिन खुद से आगे मत निकलना। Redux में शुरू में बहुत बड़ा सीखने की अवस्था है। यह अपने दम पर लेने के लिए कठिन है। तो, यहाँ आपके सीखने की शुरुआत करने के लिए हमारे कुछ अनुशंसित संसाधन हैं!

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

आप कुछ शांत परियोजनाओं का निर्माण किया जाएगा, जैसा कि नीचे देखा गया है । अंततः, आप skypey का निर्माण करेंगे, एक आधुनिक संदेश ऐप अपने जेएस, प्रतिक्रिया और रेडक्स कौशल को पूरी तरह से लाएगा।

यदि आप Redux के किसी अन्य परिचय की तलाश में हैं, तो Redux के Getting started या उसके Learning resources की जाँच करें।

यदि आप Redux स्रोत कोड को देखने में रुचि रखते हैं? इसकी Github repository को देखें।

Need Help? Make a comment below and we'll help you out...❤

Post a Comment

Need Help? Make a comment below and we'll help you out...❤

Post a Comment (0)

Unimited
Blockchain Council

Academic Collaboration with World's best Instructors and Universities

Stanford Graduate School of Business Executive Education
Utaustin
Great Lakes
Stanford Center for Professional Development
Northwestern University
MIT IDSS
IIT Madras
IIIT Hyderabad
IIT Roorkee
JAIN (Deemed-to-be University)
Pes University
SRM Institute of Science and Technology (SRMIST)
Stanford Graduate School of Business Executive Education
Utaustin
Great Lakes
Stanford Center for Professional Development
Northwestern University
MIT IDSS
IIT Madras
IIIT Hyderabad
IIT Roorkee
JAIN (Deemed-to-be University)
Pes University
SRM Institute of Science and Technology (SRMIST)

Learning Collaborations