जोताई का उपयोग करके रिएक्ट में राज्य प्रबंधन की खोज: एक व्यावहारिक मार्गदर्शिका

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

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

जोताई क्या है और यह कैसे काम करती है?

जोताई एक राज्य प्रबंधन पुस्तकालय है जो Redux जैसे अधिक जटिल विकल्पों के विपरीत एक सरल राज्य प्रबंधन समाधान प्रदान करता है। यह रिएक्ट एप्लिकेशन में स्थिति को प्रबंधित करने के लिए राज्य की स्वतंत्र इकाइयों का उपयोग करता है जिन्हें परमाणु कहा जाता है।

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

आयात { परमाणु } से'जोताई';
कॉन्स्ट काउंटएटम = परमाणु(1);

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

इसके उपयोग को प्रदर्शित करने के लिए यहां एक उदाहरण दिया गया है:

आयात { यूज़एटम } से'जोताई';
कॉन्स्ट काउंटएटम = परमाणु(1);
समारोहमेरा घटक() {
कॉन्स्ट [गिनती, सेटकाउंट] = यूज़एटम (काउंटएटम);
कॉन्स्ट वृद्धि= () => सेटकाउंट((पिछली गिनती) => पिछलागणना+ 1);
वापस करना (


गिनती: {गिनती}</p>
वृद्धि</button>
 </div>
 );
}

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

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

बुनियादी बातों को ध्यान में रखते हुए, आइए जोताई की राज्य प्रबंधन क्षमताओं को बेहतर ढंग से समझने के लिए एक सरल टू-डू रिएक्ट ऐप बनाएं।

जोताई का उपयोग करके प्रतिक्रिया में राज्य प्रबंधन

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

एनपीएम इंस्टाल जोताई

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

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

आयात { प्रदाता } से"जोताई";

अब एप्लिकेशन को इसमें लपेटें सूचकांक.जे.एस या मुख्य.जेएसएक्स जैसा कि नीचे दिया गया है।

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात रिएक्टडोम से'प्रतिक्रिया-डोम/ग्राहक'
आयात अनुप्रयोग से'./App.jsx'
आयात'./index.css'
आयात { प्रदाता } से"जोताई";
ReactDOM.createRoot(दस्तावेज़.getElementById('जड़'))।प्रदान करना(



 </Provider>
 </React.StrictMode>,
)

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

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

इस मामले में, यह टू-डू एप्लिकेशन के लिए वस्तुओं की सूची के प्रबंधन के लिए परमाणुओं का प्रबंधन करता है। में स्रोत निर्देशिका, बनाएँ TodoStore.jsx फ़ाइल करें, और नीचे कोड जोड़ें।

आयात { परमाणु } से"जोताई";
निर्यातकॉन्स्ट टोडोसएटम = परमाणु([]);

बनाकर और निर्यात करके टोडोसएटम, आप एप्लिकेशन में विभिन्न घटकों में आराम से बातचीत कर सकते हैं और कार्यों की स्थिति को अपडेट कर सकते हैं।

टू-डू एप्लिकेशन कार्यक्षमता लागू करें

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

कोई नया बनाएं घटक/Todo.jsx फ़ाइल में स्रोत निर्देशिका। इस फ़ाइल में, नीचे दिया गया कोड जोड़ें:

1. डेटा स्टोर और आयात करें परमाणु का प्रयोग करें अंकुश।

   आयात प्रतिक्रिया, { उपयोग राज्य } से'प्रतिक्रिया';
   आयात { टोडोसएटम } से'../टोडोस्टोर';
   आयात { यूज़एटम } से'जोताई';

2. कार्यात्मक घटक बनाएं और JSX तत्व जोड़ें।

   कॉन्स्ट टोडो = () => {
   
   वापस करना (
   
   
    प्लेसहोल्डर="नया कार्य"
    मूल्य={मूल्य}
    onChange={event => setValue (event.target.value)}
    />
   टोडू जोड़ें</button>
   
   
    {todos.map(ऐसा करने के लिए => (
   
   
    {todo.text}
    हैंडलडिलीट (todo.id)}>डिलीट</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };