रिडक्स टूलकिट क्वेरी का उपयोग करके रिएक्ट में डेटा कैसे प्राप्त करें

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

हालाँकि, इस प्रक्रिया को प्रबंधित करना एक थकाऊ और त्रुटि-प्रवण कार्य बन सकता है, खासकर यदि आप कई स्रोतों से डेटा प्राप्त कर रहे हैं, और आपको कई राज्यों को लगातार अपडेट करने की आवश्यकता है। ऐसे मामलों में, Redux Toolkit Query एक कुशल समाधान प्रदान करती है।

Redux टूलकिट क्वेरी (आरटीके क्वेरी) रेडक्स टूलकिट के शीर्ष पर बनाया गया डेटा-प्राप्त करने वाला टूल है। इसका आधिकारिक दस्तावेज आरटीके क्वेरी को "सरल बनाने के लिए डिज़ाइन किया गया एक शक्तिशाली डेटा लाने और कैशिंग टूल" के रूप में वर्णित करता है वेब एप्लिकेशन में डेटा लोड करने के सामान्य मामले, डेटा लाने और कैशिंग लॉजिक को हाथ से लिखने की आवश्यकता को समाप्त करना आप स्वयं"।

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

जबकि Redux Toolkit Query और React Query के बीच समानताएं हैं, Redux Toolkit Query का एक मुख्य लाभ इसके साथ सहज एकीकरण है Redux, एक राज्य प्रबंधन पुस्तकालय, एक साथ उपयोग किए जाने पर रिएक्ट अनुप्रयोगों के लिए एक पूर्ण डेटा लाने और राज्य प्रबंधन समाधान की अनुमति देता है।

RTK की कुछ मुख्य विशेषताओं में डेटा कैशिंग, एक क्वेरी प्रबंधन सुविधा और त्रुटि प्रबंधन शामिल हैं।

आरंभ करने के लिए, आप स्थानीय रूप से रिएक्ट ऐप बनाएं आज्ञा।

mkdir प्रतिक्रिया-RTQ
सीडी प्रतिक्रिया-RTQ
npx क्रिएट-रिएक्शन-ऐप रिएक्ट-आरटीक-उदाहरण
सीडी प्रतिक्रिया-rtq-example 
एनपीएम प्रारंभ

वैकल्पिक रूप से, आप कर सकते हैं Vite का उपयोग करके एक रिएक्ट प्रोजेक्ट स्थापित करें, वेब अनुप्रयोगों के लिए एक नया निर्माण उपकरण और विकास सर्वर।

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं गिटहब रिपॉजिटरी.

आवश्यक निर्भरताएँ स्थापित करें

एक बार जब आपका रिएक्ट प्रोजेक्ट तैयार हो जाता है और चल रहा होता है, तो आगे बढ़ें और निम्नलिखित पैकेजों को स्थापित करें।

एनपीएम @ reduxjs/टूलकिट प्रतिक्रिया-रेडक्स स्थापित करें

एपीआई स्लाइस को परिभाषित करें

एक एपीआई स्लाइस एक घटक है जिसमें निर्दिष्ट एपीआई एंडपॉइंट्स के साथ एकीकरण और बातचीत करने के लिए आवश्यक रेडक्स तर्क शामिल है। यह डेटा लाने के लिए क्वेरी एंडपॉइंट और डेटा को संशोधित करने के लिए म्यूटेशन एंडपॉइंट दोनों को परिभाषित करने का एक मानकीकृत तरीका प्रदान करता है।

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

में स्रोत निर्देशिका, एक नया फ़ोल्डर बनाएँ और इसे नाम दें, विशेषताएँ. इस फ़ोल्डर के अंदर, एक नई फ़ाइल बनाएँ: apiSlice.js, और नीचे कोड जोड़ें:

आयात { createApi, fetchBaseQuery } से"@reduxjs/टूलकिट/क्वेरी/प्रतिक्रिया";
निर्यातकॉन्स्ट उत्पाद एपीआई = क्रिएटएपी ({
 रेड्यूसरपथ: "उत्पाद एपी",
 आधार प्रश्न: FetchBaseQuery ({ आधारयूआरएल: " https://dummyjson.com/" }),
 समापन बिंदु: (निर्माता) => ({
 getAllProducts: बिल्डर.क्वेरी ({
 जिज्ञासा: () =>"उत्पाद",
 }),
 उत्पाद प्राप्त करें: बिल्डर.क्वेरी ({
 जिज्ञासा: (उत्पाद) =>`उत्पादों / खोज? क्यू =${उत्पाद}`, 
 }),
 }),
});
निर्यातकॉन्स्ट { useGetAllProductsQuery, useGetProductQuery } = productsApi;

यह कोड एक एपीआई स्लाइस को परिभाषित करता है जिसे कहा जाता है productsApi Redux टूलकिट का उपयोग करना createApi समारोह। एपीआई स्लाइस में निम्नलिखित गुण होते हैं:

• ए reducerPath गुण - Redux स्टोर में रेड्यूसर का नाम सेट करता है।
• baseQuery संपत्ति - का उपयोग कर सभी एपीआई अनुरोधों के लिए आधार यूआरएल निर्दिष्ट करता है FetchBaseQuery Redux Toolkit द्वारा प्रदान किया गया कार्य।
• एपीआई समापन बिंदु - का उपयोग करके इस API स्लाइस के लिए उपलब्ध समापन बिंदु निर्दिष्ट करें निर्माता वस्तु। इस स्थिति में, कोड दो समापन बिंदुओं को परिभाषित करता है।

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

यह दृष्टिकोण रिएक्ट एप्लिकेशन में राज्य प्रबंधन और डेटा लाने को सुव्यवस्थित करता है।

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

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

Src निर्देशिका में, एक बनाएँ store.js फ़ाइल और कोड की निम्नलिखित पंक्तियाँ जोड़ें:

आयात {कॉन्फ़िगरस्टोर} से"@reduxjs/टूलकिट";
आयात {उत्पाद एपीआई} से"./फीचर्स/एपीस्लाइस";
निर्यातकॉन्स्ट स्टोर = कॉन्फ़िगरस्टोर ({
 रिड्यूसर: {
 [उत्पादApi.reducerPath]: उत्पादApi.reducer,
 },
 मध्यस्थ: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

यह कोड कॉन्फ़िगरेशन के दो मुख्य टुकड़ों के साथ एक नया Redux स्टोर बनाता है:

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

परिणामस्वरूप इकट्ठा करना ऑब्जेक्ट पूरी तरह से कॉन्फ़िगर किया गया Redux स्टोर है, जिसका उपयोग एप्लिकेशन की स्थिति को प्रबंधित करने के लिए किया जा सकता है।

स्टोर को इस तरह से कॉन्फ़िगर करके, एप्लिकेशन एपीआई अनुरोधों की स्थिति को आसानी से प्रबंधित कर सकता है, और Redux टूलकिट का उपयोग करके उनके परिणामों को मानकीकृत तरीके से संसाधित कर सकता है।

आरटीके कार्यक्षमता को लागू करने के लिए एक घटक बनाएँ

Src निर्देशिका में एक नया बनाएँ अवयव अंदर एक नई फ़ाइल वाला फ़ोल्डर: डेटा.जेएस.

इस कोड को Data.js फ़ाइल में जोड़ें:

आयात { useGetAllProductsQuery } से"../फीचर्स/एपीस्लाइस";
आयात प्रतिक्रिया, {useState} से"प्रतिक्रिया";
आयात"./product.component.css";
निर्यातकॉन्स्ट डेटा = () => {
कॉन्स्ट { डेटा, त्रुटि, लोड हो रहा है, रीफ़ेच करें } = useGetAllProductsQuery ();
कॉन्स्ट [उत्पादडेटा, सेटप्रोडक्ट्सडेटा] = यूज़स्टेट ([]);
कॉन्स्ट हैंडलडिस्प्लेडेटा = () => {
 फिर से लाना ();
 सेटप्रोडक्ट्सडाटा (डेटा? .उत्पाद);
 };
वापस करना (
"उत्पाद-कंटेनर">
"उत्पाद-बटन" ऑनक्लिक = {हैंडलडिस्प्लेडेटा}>
 जानकारी दिखाओ
 </button>
 {लोड हो रहा है && <डिव>लोड हो रहा है...डिव>}
 {गलती && <डिव>त्रुटि: {error.message}डिव>}
"उत्पाद लेबल"> उत्पाद:</label>
 {productsData && ProductsData.length > 0 && (


 {उत्पादडेटा.स्लाइस(0, 4)।नक्शा((उत्पाद) => (
"उत्पाद विवरण" कुंजी = {उत्पाद.आईडी}>
नाम: {उत्पाद.शीर्षक</p>

विवरण: {उत्पाद.विवरण}</p>

कीमत: {उत्पाद.कीमत</p>
 </li>
 ))}
 </ul>
 )}
 </div>
 );
};

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

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

ऐप घटक को अपडेट करें

App.js फ़ाइल में कोड में निम्नलिखित परिवर्तन करें:

आयात"./App.css";
आयात { आंकड़े } से"./घटक/डेटा";
आयात { इकट्ठा करना } से"।/इकट्ठा करना";
आयात {प्रदाता} से"प्रतिक्रिया-रिडक्स";
आयात {एपीप्रोवाइडर} से"@reduxjs/टूलकिट/क्वेरी/प्रतिक्रिया";
आयात {उत्पाद एपीआई} से"./फीचर्स/एपीस्लाइस";
समारोहअनुप्रयोग() {
वापस करना (


"अनुप्रयोग">

 </div>
 </ApiProvider>
 </Provider>
 );
}
निर्यातगलती करना अनुप्रयोग;

यह कोड डेटा घटक को दो प्रदाताओं के साथ लपेटता है। ये दो प्रदाता घटक को Redux स्टोर और RTK क्वेरी सुविधाओं तक पहुंच प्रदान करते हैं, जिससे यह एपीआई से डेटा लाने और प्रदर्शित करने की अनुमति देता है।

Redux Toolkit Query को कम से कम कोड के साथ निर्दिष्ट स्रोत से कुशलतापूर्वक डेटा पुनर्प्राप्त करने के लिए कॉन्फ़िगर करना आसान है। इसके अलावा, आप एपीआई स्लाइस घटक में म्यूटेशन एंडपॉइंट्स को परिभाषित करके संग्रहीत डेटा को संशोधित करने के लिए फ़ंक्शन भी शामिल कर सकते हैं।

Redux की सुविधाओं को RTK की डेटा-फ़ेचिंग क्षमताओं के साथ जोड़कर, आप अपने रिएक्ट वेब एप्लिकेशन के लिए एक व्यापक राज्य प्रबंधन समाधान प्राप्त कर सकते हैं।