React मोडल में प्रॉप ड्रिलिंग बंद करें (react-call का उपयोग करें)
BBetter Stack
Computing/SoftwareInternet Technology
Transcript
00:00:00React में एक बहुत ही दिलचस्प नया टूल आया है जो पूरी तरह से बदल देता है कि हम कैसे सोचते हैं
00:00:05इंटरैक्टिव UI तत्वों जैसे कि मॉडल, डायलॉग या कन्फर्मेशन बॉक्स को रेंडर करने के बारे में।
00:00:11इसका नाम React Call है।
00:00:13अगर आपने कभी जटिल मल्टी-स्टेप फॉर्म विज़ार्ड, कन्फर्मेशन मॉडल, या कोई
00:00:18आइटम पिकर बनाया है React में, तो आप पहले से ही जानते हैं कि ओपन स्टेट्स को मैनेज करना, सक्सेस कॉलबैक पास करना, और
00:00:24प्रॉमिस को हैंडल करना आपके कोड को पूरी तरह से जटिल बना सकता है।
00:00:28लेकिन React Call को इस समस्या को हल करने के लिए डिज़ाइन किया गया है।
00:00:31तो आज के वीडियो में, हम React Call पर एक नज़र डालेंगे, देखेंगे कि यह कैसे काम करता है, और
00:00:36कुछ कोड उदाहरण देखेंगे।
00:00:37यह बहुत मज़ेदार होने वाला है, तो चलिए इसमें गहराई से उतरते हैं।
00:00:44तो आखिर React Call क्या है?
00:00:47खैर, यह एक छोटी और हल्की यूटिलिटी है जो आपको React कंपोनेंट्स को एसिंक्रोनस
00:00:52फंक्शंस की तरह कॉल करने देती है।
00:00:53नेटिव ब्राउज़र window.confirm API के बारे में सोचें।
00:00:57जब आप इसे कॉल करते हैं, तो आपका कोड रुक जाता है, यूजर के OK या कैंसिल पर क्लिक करने का इंतज़ार करता है, और
00:01:03सीधे एक बूलियन वैल्यू वापस करता है।
00:01:06यह आपके बिज़नेस लॉजिक को पूरी तरह से कॉलर के पास ही रखता है।
00:01:09और React Call उसी सहज मानसिक मॉडल को आधुनिक React की दुनिया में लेकर आता है।
00:01:16isModelOpen जैसे अलग स्टेट वेरिएबल बनाने, onClose या
00:01:22onSubmit प्रॉप पास करने, और जटिल कॉन्टेक्स्ट प्रोवाइडर्स या पोर्टल्स सेट करने के बजाय, आप बस
00:01:29कंपोनेंट के रिस्पॉन्स का इंतज़ार कर सकते हैं।
00:01:30अंदरूनी तौर पर, यह प्रॉमिस मैनेजमेंट को हटा देता है, टाइप रिक्वेस्ट और रिस्पॉन्स को
00:01:36आउट ऑफ द बॉक्स हैंडल करता है, और हॉट मॉड्यूल रिप्लेसमेंट को पूरी तरह से सपोर्ट करता है, ताकि आपका डेवलपमेंट वर्कफ़्लो
00:01:41तेज़ बना रहे।
00:01:42और यह तीन अवधारणाओं को सामने लाता है: रूट और स्टैक, अपसर्ट, और म्यूटेशन फ़्लो।
00:01:48तो पहली बड़ी अवधारणा है रूट और स्टैक।
00:01:50React Call के साथ, जो कॉल करने योग्य कंपोनेंट आप बनाते हैं वह एक फंक्शन नहीं होता।
00:01:54यह वास्तव में आपके एप्लिकेशन ट्री में अपने स्वयं के माउंटिंग पॉइंट के रूप में कार्य करता है।
00:01:58आप कंपोनेंट को कहीं भी रूट टैग के रूप में रखते हैं, जैसे कि आपकी ऐप फ़ाइल या हाई-लेवल
00:02:03लेआउट फ़ाइल में, और यह एक लिसनर की तरह वहाँ बैठता है।
00:02:06जब आप कई कॉल्स ट्रिगर करते हैं, तो React Call उन्हें एक इंटरनल स्टैक का उपयोग करके मैनेज करता है, और यह
00:02:11प्रत्येक सक्रिय इंस्टेंस को अपने आप रेंडर करना हैंडल करता है।
00:02:14और यह बंद होने पर साफ़ एग्जिट एनिमेशन को भी हैंडल करता है और इंस्टेंस को अलग रखता है ताकि
00:02:20वे एक-दूसरे के रास्ते में न आएँ।
00:02:22अगला अपसर्ट है, जो सिंगलटन UI पैटर्न के लिए एक जीवन रक्षक है।
00:02:27आम तौर पर, यदि आप एक कंपोनेंट को कई बार कॉल करते हैं, तो यह स्टैक पर एक नया इंस्टेंस डाल देता है।
00:02:33लेकिन क्या होगा यदि आप एक ग्लोबल नोटिफिकेशन टोस्ट, या लोडिंग ओवरले, या प्रोग्रेस
00:02:39इंडिकेटर बना रहे हैं जहाँ आप स्क्रीन पर एक बार में केवल एक ही इंस्टेंस चाहते हैं?
00:02:45खैर, कॉल निष्पादित करने के बजाय, आप अपसर्ट निष्पादित कर सकते हैं।
00:02:48और यदि कोई इंस्टेंस पहले से ही सक्रिय है, तो यह मौजूदा कंपोनेंट को आपके नए डेटा के साथ
00:02:52ऑन-द-फ्लाई अपडेट करता है, न कि कोई डुप्लीकेट बनाता है।
00:02:56और अंत में, हमारे पास म्यूटेशन फ़्लो है।
00:02:58तो इस लाइब्रेरी में एक इन-बिल्ट useMutationFlow हुक शामिल है जिसे विशेष रूप से आपके कॉल करने योग्य
00:03:04UI को एसिंक्रोनस कार्यों से सीधे जोड़ने के लिए डिज़ाइन किया गया है।
00:03:06यदि आपके पास एक कन्फर्मेशन मॉडल है जो सबमिट करने पर एक भारी बैकएंड API रिक्वेस्ट ट्रिगर करता है, तो हुक
00:03:12आपके लिए पेंडिंग स्टेट को आउट ऑफ द बॉक्स मैनेज करता है।
00:03:15यह सुनिश्चित करता है कि मॉडल खुला रहे और जब एसिंक्रोनस फंक्शन चल रहा हो तो एक लोडिंग स्पिनर दिखाए और
00:03:21कॉल को केवल तभी आधिकारिक रूप से समाप्त करता है जब प्रॉमिस सफलतापूर्वक रिज़ॉल्व हो जाता है।
00:03:25तो यह आपके UI स्टेट और डेटा म्यूटेशन को खूबसूरती से जोड़ता है।
00:03:29तो अब उनकी वेबसाइट पर कुछ व्यावहारिक उदाहरण देखते हैं, क्योंकि मुझे लगता है कि वे बहुत
00:03:34स्व-व्याख्यात्मक हैं।
00:03:36और मुझे लगता है कि वे यह भी दिखाते हैं कि कुछ भी शुरू करने के लिए आपको कितना कम कोड लिखने की आवश्यकता है।
00:03:41तो उदाहरण के लिए, कन्फर्म डायलॉग में, हमें बस यहाँ एक कॉल करने योग्य चीज़ बनाने की आवश्यकता है।
00:03:48और फिर हम अपने कंपोनेंट को इस create callable हुक के साथ एक उच्च-क्रम कंपोनेंट के रूप में लपेटते हैं।
00:03:54और फिर हम अपने बटनों के लिए कॉल और फंक्शंस को ऑन-क्लिक पर पास कर सकते हैं।
00:04:01और यह सब कुछ है जो हमें कॉल करने योग्य ऑब्जेक्ट के लिए चाहिए।
00:04:04और रूट पर, हमें बस कंपोनेंट को इम्पोर्ट करने की आवश्यकता है।
00:04:08और डिलीट बटन के लिए, चूंकि हमारा कन्फर्म कंपोनेंट create callable के साथ लपेटा गया है
00:04:14उच्च-क्रम फंक्शन, हम बस इसे इस हैंडल क्लिक फंक्शन पर एसिंक्रोनस रूप से इनवोक कर सकते हैं।
00:04:21तो बहुत ही साफ-सुथरा, बहुत ही व्यवस्थित, ज्यादा बॉयलरप्लेट नहीं।
00:04:26और आपको किसी कॉन्टेक्स्ट प्रोवाइडर या स्टेट वेरिएबल या रिडक्स या ज़ूस्टैंड का उपयोग करने की आवश्यकता नहीं है।
00:04:31और यदि आप गहराई से जानना चाहते हैं कि कितने उपयोग के मामले हैं, तो आप उदाहरण
00:04:36अनुभाग देख सकते हैं और प्रत्येक उदाहरण एक कोड स्निपेट भी प्रदान करता है।
00:04:40इनमें से कुछ अत्यधिक जटिल भी हैं, उदाहरण के लिए, वे जो एसिंक्रोनस
00:04:46कार्यों से संबंधित हैं जो बैकग्राउंड में चल रहे हैं।
00:04:49तो आप इन सभी बेहतरीन उदाहरणों को देख सकते हैं।
00:04:52मुझे लगता है कि यह बहुत कूल और बहुत हल्का है।
00:04:55बहुत बढ़िया।
00:04:56तो यह लीजिए, दोस्तों।
00:04:57संक्षेप में React Call यही है।
00:04:59खैर, आप निश्चित रूप से एक बुनियादी कस्टम प्रॉमिस रैपर या सिंगल मॉडल खुद कोड कर सकते हैं।
00:05:06मुझे लगता है कि यह लाइब्रेरी सभी मुश्किल एज केसेस को खूबसूरती से संभालती है, जैसे कि एक स्टैक में
00:05:11कई सक्रिय इंस्टेंस को संभालना या अपसर्ट के माध्यम से सिंगलटन को अपडेट करना और भारी बैकएंड
00:05:17म्यूटेशन के साथ UI स्टेट को सिंक करना।
00:05:18इसलिए मुझे लगता है कि यह एक क्लीनर और अधिक पठनीय React आर्किटेक्चर के लिए
00:05:24आपके फ्रंटएंड टूलकिट में रखने के लिए एक बहुत अच्छी हल्की यूटिलिटी है।
00:05:26आप React Call के बारे में क्या सोचते हैं?
00:05:28क्या आपको यह पैटर्न पसंद आया?
00:05:29क्या आप इसे अपने प्रोजेक्ट्स में उपयोग करेंगे?
00:05:31हमें नीचे कमेंट सेक्शन में बताएं।
00:05:33और दोस्तों, अगर आपको इस तरह के तकनीकी विश्लेषण पसंद हैं, तो कृपया मुझे वीडियो के नीचे
00:05:37दिए गए लाइक बटन को दबाकर बताएं।
00:05:39और हमारे चैनल को सब्सक्राइब करना न भूलें।
00:05:42यह BetterStack की ओर से Andrus था, और मैं आपसे अगले वीडियो में मिलूँगा।
00:05:58आप
Community Posts
No posts yet. Be the first to write about this video!
Write about this video