Transcript for:
रिड्यूक्स का उपयोग और कंपोनेंट्स

है तो सबसे पहले तो है पीछे नियुक्त एवरीवर्न एंड इट्स गुड टो सी की इतनी सारी क्लासेस मैंने बीच में गॉल करी हैं कुछ पुरानी वीडियो अपलोड कर दी बट उसके बावजूद भी काफी सारे बच्चे हैं जो लगाथार फॉर्स को कर रहे हैं तो ऐसे फाइटर लोग ही लाइफ में सफल होता है तो वहां अ गुड़े भाई, I know मैं अपना काम थोड़ा उतना चैसे नहीं कर पा रहा है इस बार कोशिश करते हैं आगे compensate करने की चलो शुरू करते हैं, आज map state 2 props पढ़ेंगे हम एक map dispatch 2 props कुछ है, ये दोनों चीज़े पढ़ेंगे और फ़रदर आगे बढ़ेंगे, redux आगा अभी the way we are using Redux is हमने ये use dispatch use कर रखा है ये हमको एक dispatch नाम का function दे देता है जब भी हमको कोई कुछ करना होता है button button click हुआ है या कोई जब भी हमको कोई API call करने है हम ये dispatch को action दे देता है action dispatch हो जाता है right और जब हमको data चाहिए होता है तो dispatch की help से हम store तक data पहुचा रहे है action dispatch करके यूज सेलेक्टर की हेल्प से हम डेटा मंगा रहे हैं एंड वर्किंग फाइन वेट हमने यहां पर हम थे इस पर और एक लिख नहीं हो रहा था अच्छा यह भूल गया मैं क्या तक कार्य यूअरल्स थे हमारे ओरडर्स था इनक आ तो यहाँ पे मारे order दिख रहे थे, order number 1, इतना total, इतना इसमें total product, click करते थे, तो उसकी detail दिखती थी कि क्या क्या product थे, ठीक है, so it is all working, data जा भी रहा है, data आ भी रहा है, सब हो रहा है, API call हो रही है, API call होके, data store में जा रहा है, लेकिन यह approach उतनी अच्छी नहीं है, कि इस कुछ प्रंसिपल्स है जिनको अगर फॉलो करो तो आपका कोड आप टीन कोड मोर मेंटेन एबल इजी टू रीड पोड लिख पाते हो ठीक है सो बिसीटली देखो मैं समझाता हूं इसमें प्रॉब्लम कहां से है सॉलिड में एक है सिंगल रिस्पॉन्सबिलिटी एस स्टेंड्स फॉर सिंगल रिस्पॉन्सबिलिटी एस एंसॉलिड तो यह से सोलेड एक फॉल फॉर्म है अब हर फील्ड में मतलब कोडिंग में ऐसा बहुत हो जाए जैसे ड्राइड डोंट रिपीट यूर्सल्फ ऐसे शॉर्ट फॉर्म बना लेता है तो सोलेड का एसिस्टेंट फॉर सिंगल रिस्पंसिबिलिटी यहां पर सिंगल रिस्पंसिबिलिटी प्रिंसिपल फॉलो नहीं हो रहा इस विटी का मतलब है एक इंसान की एक ही ज्ञानदारी होनी चाहिए कॉम्पोनेंट का काम है डेटा को डिस्प्ले करना वह डेटा कहां से निकलेगा और अच्छा जी इस वाले सेलेक्टर से ये निकालो, इस वाले सेलेक्टर से ये डेटा निकालो, ओर्डर आईडी निकालो, यू आरल में से, फिर उस में से ओर्डर आईडी पास करके ओर्डर निकालो, ये सारा जंजट, ये कॉंपोनेंट की जिम्मेदारी नहीं होनी चाहिए, कि मैं दिमाग उसे पता है मैं डाटा कहां से निकाल रहा हूं में रिडक्स निकाल रहा हूं मैं कोई एपिआई कॉल कर रहा हूं मैं यूआरल में से डाटा निकाल रहा हूं और उसको यह भी पता है कि जब मेरा बटन क्लिक होगा तो अब यह भी पता है अ उस component को यह भी पता है अगर button click हुआ तो क्या करना है कौन सा action dispatch करना है वो सब पता है उसको और on the other hand जो dumb component है उसका वाइदा यह है कि उसको कुछ भी नहीं पता उसको prop में मिल रहा है data उसको नहीं पता वो data कहां से आया और उसको prop में ही मिल रहे है function उसको यह भी नहीं पता यह function क्या करते है उसको prop में function मिला कि button के click पे यह function call कर देना फलाने के click पे यह function call कर देना उसने call कर दिया प्रेस यह फंक्शन कंपोनेंट अभी जो कंपोनेंट है और डिटेल पेज यह स्मार्ट रेट स्मार्ट है तो क्या कैसे स्मार्ट है देखो इसको पता है कि डाटा कहां से निकालना है इट नोज कि डाटा कहां से आ रहा है तो पूरी खबर है और इसको यह भी खबर है कि मैं क्या डिस्पैच करूंगा जिम्में यह वाले एक्शन डिस्पैच करूंगा इसको यह डाटा द� तो इसको पता है मैं कौन सा action dispatch कर रहा हूँ button के click पे हो सकता है कोई दूसरा action जैसे ये वाला तो नहीं dispatch कर रहा हूँ order detail अच्छा ये देखते है order list page तो इसको पता है order list page को कि click पे अच्छा यहाँ पे तो हमने route बना रखे click वगेरा भी भी action function call करते हैं हम ये तो अभी use effect में कर रखे हैं तो these are smart components अब स्मार्ट कॉंपोनेंट सुनने में तो लग रहा है कि स्मार्ट कॉंपोनेंट अच्छा है, स्मार्ट है भाई, लेकिन जैसे पॉलिटिशन्स नहीं चाते ना कि देश की जनता स्मार्ट हो, डंब का बड़ा फायदा है, क्या फायदा है, नेता लोग कैसे भी चला सकते है component जितना dump component को manage करना उतना आसान है code को manage करना आसान होता जाएगा अगर सब चीज़े dump है वो अपना दिमाग नहीं लगा रही है देखते हैं कैसे पहले चलो सोड़ा सा high level समझाता हूँ कि कैसे dump होने पे वो component multiple जगाओं पे use हो सकता है जैसे dump लोग है न तो डम कंपोनेंट का क्या फायदा हुआ डम कंपोनेंट एडवांटेज डम कंपोनेंट का सबसे पहले एडवांटेज तो हुआ विजेब एडवांटेज तो एक लिस्ट है मान लो यह ओडर लिस्ट की बात ही करता है यह ओडर की जो लिस्ट है यह डम हो तो डम होगी तो इसको नहीं पता होगा कि क्लिक करने पर क्या करना कैसे अभी तो इसको पता है कि जब भी ओडर नंबर वन क्लिक हो तो ओडर नंबर वन वाला पेज खोल दो इस लिस्ट को पता है ओडर लिस्ट पेज को कि मुझे क्या करना है क्लिक होने पर स्मार्ट है अग इससे रियूज़ एबिलिटी कैसे बढ़ी? रियूज़ एबिलिटी ऐसे बढ़ी, मैंने फेस्बुक के एग्जांपल से समझाओंगा, प्रिगिन हमारे जमाने में फेस्बुक ही चलता था, इंस्टाग्राम मैंने कभी यूज़ नहीं किया, आपने टैक पर क्लिक किया आपने के बटन क्लिक किया टैक करने के लिए तो फ्रेंड की लिस्ट खुलकर आगे वही फ्रेंड के लिस्ट वही फोटो कोई नया दोस्त नहीं है कोई नए फोटो नहीं है कोई नया नाम है सब वही आपकी फ्रेंड की बनाता जाएगा फिर आपने एक पेज बनाया फेसबुक में ना आप फैन पेज बना सकते हो पेज जो था अब वहां पर आप एक सेकंड होल्ड करना था, sorry, so I was saying कि आपने ना एक Facebook पे group बनाया, अब उस group में आप अपने friends को invite करना चाहते होगे, आपने फिर से एक बटन पे click किया, फिर से friend list खुल गई, लेकिन इस बार friend list में किसी भी item पे click करोगे तो अलग काम होगा, पहले किसी friend के नाम पे click करे थे तो वो friend tag हो जा रहा था, अब friend के नाम पे click करोगे तो वो group में add हो जाएगा, तो लिस्ट का कंपोनेंट तो हम एक ही बनाएंगे ना लिस्ट का कंपोनेंट तो पचासो जगा फेस्बुक में दिखता है आपको किसी को फेस्बुक पेज पर इनवाइट करना है ग्रूप में एड करना है कहीं पर टैग करना है किसी को फ्रेंड सजेस्ट करना है जब फेस् है तो वह आपको बोलेगा फेसबुक कि आपका यह आपने इसको अभी फ्रेंड ऐड किया इसका मतलब आपका फ्रेंड है बट तो इसके ज्यादा फ्रेंड तो वहाँ भी फ्रेंड की मैं अपने फ्रेंड के लिस्ट में से उसको सजेशन दे रहा हूं तो multiple जगा यूज़ हो रहा है बट हर जगा लिस्ट के क्लिक पे जो काम होना है वो अलग अलग है तो ये तो तभी possible है न जब उसको बाहर से information मिलती हो कि ये लो भाईया इस बार तुम्हें क्लिक करने पे ये function call करना है मैं उसी component को दूसरी जगा use करूँगा उसको दूसरा function दे दूँगा component सेम रहेगा prop में function दूसरा होगा तो reusable हो गया smart component अपना दिमाग लगाता अपनी स्मार्टनेस दिखाता हमेशा क्लिक करने पर टैक कर देता जबकि हमको वो नहीं कराना या फिर दूसरा तरीका क्या होता कोड कॉमपोनेंट के अंदर है वो स्मार्ट है लेकिन बाहर से हम उसको एक फ्लैग भेजते कुछ इंफॉर्मेशन भे उसको तो एक function दिया जाए, कि ये ले भाई, तु डम्ब है, तुझको दिमाग नहीं लगाना, जब भी click पे कुछ करना होगा, हम function देंगे, वो function call कर देना, component को एक जगा use करो, tag वाला function दे दो, दूसरी जगा use करो, prop में उसको, add to group वाला function दे दो, तो बास समझ आ गई होगी जो unit testing, automated test जो हम लिखते हैं, हमने component लिखा, और normally जब एक चीज़ होती है, जो तुमको आगे थोड़े सी advanced चीज़ है, फिर beginners के लिए नहीं है, TDD, test driven development, तो test driven development में हम पहले test लिखते हैं, फिर component बनाते हैं, चाहे तुम ऐसे भी test driven भी नहीं कर रहे हैं, बट unit test अगर लिख रहे हो, इसका तो खैर बहुत फायदा होता है, इससे code reusable लिखा जाता है, यह testing ये नहीं सर्फ enforce करता, कि मतलब bug सी नहीं सर्फ बचाता, अससे भी जाधा important, test driven development करोगे, जो testable हो, और अगर testable code है, तो ये this helps a lot, टेस्ट लिखोगे ऑटोमेटिक, कॉंपोनेंट लिखोगे और कॉंपोनेंट को टेस्ट करने का कोड लिखोगे, बट अगर कॉंपोनेंट स्मार्ट है तो उसको टेस्ट करने का जो कोड होगा वो बहुत कॉंपलिकेट हो जाएगा, स्मार्ट बन्दे को टेस्ट करना बड़ test करना मुश्किल होगा तो हम component को dump बनाएंगे तो this is another advantage testing आसान हो जाएगी reusable हो जाएगा testing आसान हो जाएगी यही दो major advantages है तो अब इसको कैसे बनाएंगे हम dump यह तो हमारा smart है और in fact एक और चीज उसको reusability में count करूँगा पहला ही है वो but can be used एक रोस प्रोजेक्ट यह एक पूरा सा एडिशनल मतलब रियूज एबिलिटी एक तो हो गई विदिंग प्रोजेक्ट आप दूसरे प्रोजेक्ट में भी रियूज कर पाओगे अगर डंब है अगर स्मार्ट है तो सेम में ही रियूज करना मुश्किल है तो फ्लिप कार्ट में हमारे लिए तो वह एक ईकोमर्स की वेब है वेबसाइट है जाओ शॉपिंग कर लो तो एक ही प्रोडक्ट पता हमें उनका चलो एक और हम अंतर अभी फ्लिप कार्ट के उन्होंने बाई किया बट एक्चुली मैं उनके ना बहुत ज्यादा वह है यह कहते हैं जिसकी मी वन सेकंड उसको पोस्ट करना पड़ेगा इंपोर्टेंट में जैसे इन्सलाइट काफी तेज आवाज थी इसका मतलब ये माइक काफी अच्छा काम कर रहा है मेरे पास वोई ब्लू ये थी है काफी सारे लोग यूज़ करते हैं तो मैंने वोई ले लिया था दिमार्क तो लगाया नहीं था लेकिन सीम्स लाइक इट्स वेरी मेरे पास वोई ब्लू ये था लेकिन तो मंदे से अगले मंदे से जो classes होंगी वो वहीं से होंगी और content की recording भी शुरू होगी जो YouTube पे हम वो जो animated content content का हम कह रहे थे वो बड़ा अच्छा content बना रहे हैं ये लंबी-लंबी classes की जगा इसको न बिल्कुल crisp करके compress करके कि जो बात अभी 15 मिनित में समझ आ रही है 5 मिनित में आ जाए और उतने अच्छे से आ जाए so you are working on that so ये can be used across projects अब तो क्या होगा जैसे flipkart है अब उन्होंने बहुत सारे software बना रहे हैं internal बहुत सारे चीज़ों के लिए vendors कुछ marketing के tool हो सकते हैं, कुछ हो सकते हैं, HR का उन्होंने अपना custom tool बना रखा हो, लोगों की leaves manage करने के लिए, salaries manage करने के लिए, अंदर बहुत सारी processes होती हैं, तो बड़ी companies में बहुत सारे softwares होते हैं, बढ़ी बाहर के लोगों को कमी दिखते हो, और फिर हम चाहेंगे कि सारे components में, मैं एक ही जैसी theme रहें, flipkart है तो सब जगह flipkart जैसे ही दिखे, हर software एक ही तरह के button, एक ही तरह का UI, दो फायदे एक तो समझने में आसान रहता है दूसरा थोड़ा सा थीम दिखती है ब्रेंड कैरी होता रहता है यह दर्ज अधर कि आप तो आपना सेम एक बटन कंपोनेंट बनाया हर प्रोजेक्ट में यूज करना चाहोगे तो क्या किया जाता है एक हम तब भी तो हर प्रोजेक्ट में मैं एनपीएम इंस्टॉल करूंगा वह जो एनपीएम इंस्टॉल हो रहा होगा वह वह लाइब्रेरी वह पब्लिक लाइब्रेरी नहीं है ओपन सॉर्स लाइब्रेरी नहीं है हमारी इंटरनल लाइब्रेरी है तो अगर दस प्रोजेक्ट चलो बढ़िया लेकिन ऐसा हो पाए उसके लिए ज़रूरी है हर component अलग project अलग हो सकता है हो सकते है एक अगला project जो हो उसमें Redux use इना हो रहा हो ये तो Redux अब Redux use नहीं हो रहा तो Use Dispatch और ये Use Selector ये तो काम ही नहीं करेंगे बट अगर ये component dump होता Redux है या क्या है ये सब जगा काम कर देता वो एक dump का यही फाइद है कहीं भी उसको तुम कहीं पे भी उसको डाल सकते हो, वो कुछ नहीं, चूचा ज़्यादा नहीं करता, ठीक है, तो life में smart बनना है, लेकिन component बनाना है, तो चलो component बनाने के तरफ कदम बढ़ाते हैं, तो सबसे बहले यह use selector हटाते हैं, अब इस use selector को हटाने का सबसे अच्छा तरीका है, we will use connect, react redux हो ची क्रिएटर एक फंक्शन है इसको कॉल कर दो तो यह आपको एक एचोसी देता है फिर शॉर्ट में इसको भी एचोसी बोल देता है मैंने पहले भी बताया है ऐसा जो फंक्शन होते हैं जिन्हें कॉल करने से एचोसी मिलता मिलेगा और फिर उसे एचोसी को कॉल करोगे और उसको कंपोनेंट दोगे अ तो आपको नया component मिलेगा और यह जो connect है इसको आप एक function pass करते हो जिस function का नाम हम अक्सर उसको बोलते हैं map state to props यह नाम यही रखना जरूरी नहीं है आप नाम कुछ और भी रख सकते हो पर अक्सर आपको यही नाम मिलेगा convention है नाम में कुछ नहीं रखा तो मैं यह आपको फंक्शन बनाकर दिखा देता हूं फंक्शन से बना लेगा फंक्शन मैं स्टेट टू प्रॉप्स यह फंक्शन मैंने बनाया और यह फंक्शन फिर मैंने कनेक्ट को दे दिया तो और कनेक्ट फिर मुझको देगा एक होसी उस होसी को अभी मैं यहाँ पर क� कनेक्ट कॉल करके एचोसी मिला एचोसी के आगे एक और पेरेंथेसिस लगा कि एचोसी कॉल किया तो कॉम्पोनेंट मिला और उस कॉम्पोनेंट को मैंने एक्सपोर्ट डिफॉर्ट कर दिया कॉम्पोनेंट एक्सपोर्ट कर दिया और यह अच्छा यहां पर हमने मेमो लगा कि बिनी आई क्या बात चलो बढ़िया गर्बर रवना है इ आप मैं पिस्टेट तो अब यह पहले कंपोनेंट वह मैमो में डाला एक होसी और फिर उसे चुकी का आउटपुट मैमो तो क्या करता है तुमको पता है याद होगा और फिर इसे चुकी को मैंने डाला कनेक्ट में इस रिकनेक्ट और इसे दिया उसमें यहां पर कनेक्ट कॉल किया उसने यहां तक कनेक्ट को कॉल करके मैं इसे मिला उसे चुकी मैं मैमो का आउट तो order detail component को memo ने एक नए component में convert किया और उस नए component को connect किया output ने एक और नए component में convert कर दिया देखते हैं समझ आएगी बद्धरे दिया अलग जो map state to prop है ये function तो अभी हमने इसमें कुछ code तो लिखा ही नहीं इस component का काम है इसको दो parameters मिलते हैं एक तो state एक on props स्टेट इस टाइप लिखनी पड़ेगी स्टेट टाइप इस टेट इस टेट मैंने स्टोर में से डाटाइप इंपोर्ट कर इस कंपोनेंट का काम है एक ऑबजेक्ट रिटर्न करें रिटर्न ऑबजेक्ट नाम विद इस रॉप नेम्स एस इस एंड डाटा रॉम फॉर रॉम रेडक्टर स्टोर एंड वेल्यू इस फंक्शन का काम है एक ऑब्जेक्ट रिटर्न करें ऑब्जेक्ट रिटर्न करवाना चलो रिटर्न करवा जाते हैं ऑब्जेक्ट रिटर्न ऑब्जेक्ट तो ऑब्जेक्ट रिटर्न करवा दिया लेकिन अब इसमें प्रॉब्स क्या होनी चाहिए वो कीज क्या होनी चाहिए ऑब्जेक्ट में order and products right पर अभी थोड़ा सा steps में करते हैं पर उससे पहले इसने यहाँ से Redux Store से निकाला था orders map and order products map order map और products map बोल लो इसको order products में से what है तो यह दोनों चीज़े निकाली थी और उसमें से फिर further order ID डाल के यह दोनों चीज़े निकाली थी तो पहले अभी समझाता हूं मैं हमको यह करना है कि यूज सेलेक्टर व्यूज सेलेक्टर वगैरह ना करना पड़े तो यह जो ऑडर मैप जो यह यूज सेलेक्टर की हेल्प से निकाल रहा था यह अब मैं इसको सीधा प्रॉब्लम में ले दूंगा और यह तो मैं इसको प्रॉब्लम में ले दूंगा तो यह सेलेक्टर यूज नहीं करना पड़ेगा एक तरफ और ऑडर मैप जो कि वह अंदर वर्यवर्ल बना रहा था वह उसको प्रॉब्लम मिलने जा रहा है मैंने की तो रख दी ऑडर प्रॉब्लम ऑडर स्मैप अ है और इसमें वेल्यू मैंने डाल दी और मिल्यू मैंने इसमें पोर्टर मैप सेलेक्टर और दूसरा अ कि ओर्डर्स प्रोडक्ट मैप फिर कि उन्हें प्रोडक्ट में पॉइंट में ऑर्डर प्रोडक्ट सेलेक्टर का डाइटा आएगा है और अब यहां से मैंने यह सेलेक्टर हटा दिया अच्छा ठीक है और यह राजर मैंने यहां पर ऑर्डर अ झाल कोमा ठीक है और अब मैं इसकी प्रॉप सोर्ट यह भी चेंज करना पड़ेगा मुझे कि यह क्या-क्या लेता है यह अभी प्रॉप में तो ओडर्स मैप लेता है विच इस इस स्ट्रक्चर का आईडी कॉलन नंबर अ कि यहां पर मिलता है कोडर का ऑप्शन और एक यह ओडर्स प्रोडक्ट मैप लेता है कि अ हम इसको फर्थ सिंप्लीफाई करने वाले लेकिन स्टेप बाय स्टेप करेंगे तो समझ आएगी कहानी ID कॉलन नंबर प्रोडक्ट प्रोडक्ट की अरेग यह तो है ओडर्स मैट ओडर आईडी के अगेंस्ट में तो उसको ओडर के जगह ओडर आईडी बोल लो तो ये इस तरह की इसको दो props मिल जा रहे हैं तो फरक क्या पड़ा अब हमको use selector use नहीं करना हमारा component अब थोड़ा dumb हो गया है दुनिया में किसी को दो दिमाग लगाना पड़ेगा न अब तुम दिमाग नहीं लगाते नेता लोग लगाते हैं तो सेम चाहिए चीज हम यहां चाहे हम कहेंगे कंपनेंट से तुम मत लगाओ दिमाग तुमको डेटा प्रॉब में मिलेगा यह कहां से आया कहां से नहीं आया तुम्हें से कोई मतलब नहीं तुमको पता भी नहीं चलेगा कि रिडक्स यूज हो रहा वो डेटा निकाल हम स्टेट से है, बट कल को, तो ये ये बन्दा है जो दिमाग लगा रहा है, बट ये तो अलग फंक्शन है, ये कॉंपोनेंट नहीं है, ये तो सेम फाइल में लिखा हुआ है, आप चाहो तो इसको अलग फाइल में लिख लो, लेकिन ये कॉंपोनेंट नह इसको भी आधी खबर है, इसको भी आधी खबर है, component को, component data दिखा रहे हैं, उसको यह नहीं पता data आ कहां से रहे है, तो इससे क्या हुआ, this is divide and rule, हम अब चोटे-चोटे चीजों में तोड़ लेंगे, तो सबको manage करना आसान हो जाएगा, इसके test अलग लिख पाएंगे हम, इस स्टेट में से सही डेटा निकालने का ठीक है जीजें वैसे ही चलेंगे आप देखो देख चलाकर देखते हैं ओडर पर क्लिक किया ओडर की डिटेल दिख गई बट इस बार डेटा जो आया है कि मैंने कंसोल लॉग भी लगा था ओडर प्रोडक्ट में यह यहां से आए ठीक लेकिन यह कोई बहुत अच्छा structure नहीं लग रहा हूँ मुझे कॉम्पोनेंट तो डंप हो गया बट एक ओडर कॉम्पोनेंट का मतलब नाम है ओडर डिटेल पेज और देखना वो प्रॉप क्या ले रहा है ओडर डिटेल पेज ले रहा है ओडर का मैप थोड़ा सा अजीब है न ओडर और उसको सारे order देने पड़ेंगे, दिखाना उसे एक है, देंगे हम सारे, सारे क्यों देंगे, इसलिए देंगे, ताकि वो फिर URL में से order ID निकाल के, और order map में से order ID डाल के, particular order निकाल पाए, अब हमको यही नहीं पता न, कि URL में order ID कौन सी है, तो इसलिए हम उसको पूरा ही map देते रहे हैं, ले भाईया, पड़ यह तो गलत approach है, component को reusable बनाना है, इसलिए तो कर रहे हैं, dump बना रहे हैं, एक advantage तो यही है न, reusability, but यह कैसी reusability हुई, कि जब भी component यूज़ करना पड़ेगा, हमारे पास एक order था, हमको वो order दिखाना था, हम गए order detail page के पास, order detail page मांग रहे हैं सारे order, तो यह तो component reuse करना बड़ा मुश्किल हो जाएगा, क्योंकि इसको जब भी reuse करना शुरू करोगे, तो दुनिया भर का data चाहिएगा, वो data चाहिएगा जो data यह दिखाता भी नहीं, तो हमको इसको further fix करना बड़ेगा, अब हम आते हैं वहां पर वह काम करेगा ऑन प्रॉप्स जो भी मैं तुमको बता रहा था कि यहां पर देख सकेंगे परामेटर यहां पर यहां डम्ब हो गए, लेकिन तुमने देखा हो को कुछ डम्ब ऐसे ही भी होता है, होते तो डम्ब ह कि उनको जो भी आंसर दे दो वह अच्छा-अच्छा करके मान भी लेंगे यह सवाल बहुत पूछेंगे कुछ ऐसे ही कंपनेंट डंब है जो दे दोगे ले लेगा लेकिन मांग दुनिया भर की चीजें रहा है सारे ओर्डर सारे प्रोडक्ट का आते हैं यहां से क्योंकि अभी कंपनेंट डेटा मांगते टाइम तो डंब है लेकिन करना क्या है वह सब यहां पर है इसके लिए हम एक और function बनाएंगे, function map dispatch to props, और यहाँ, अच्छा उससे पहले मैं एक चीज बता दू, यहाँ पे ये फायदा है, आप इस component को reuse कैसे करोगे, थोड़ा समझ लो, ये component को हर जगा पे अलग-अलग orders, एक जगा पे हो सकता है जैसे वो friend list वाला example दे रहा था मैं facebook friend list वो same component click करने पे सिर्फ काम ही अलग-अलग नहीं करता कहीं बार data भी अलग-अलग दिखाता है जैसे कहीं पे हो सकता है कि friend list में सारे friend ना दिख रहे हो mutual friend दिख रहे हो मैंने किसी की profile पे click किया कि उसके और मेरे कौन से friend है जो common है तो common friend दिख रहे हो जो हम दोनों की बीच में common है कहीं पे हो सकता है वो friend दिख रहे हो जिन्होंने एक particular page like कर रखा है इसमें एक feature होता था कि आपके 5 friends ने ये restaurant like कर रखा है तो मैं देखना चाहूँगा कौन से 5 friend में ने click किया तो friend list component ही खुला same वो ही photo photo के आगे name name के नीचे उनका hometown या whatever same component but इस बार 5 ही दिख रहे हैं उसमें result friend list component में बस 5 ही result दिख रहे हैं जिन्होंने वो restaurant like कर रखा है तो वो data भी अलग अलग display कर रहा है तो अब वो अलग-अलग डेटा कैसे डिस्प्ले होगा आप अलग-अलग मैप स्टेट टू प्रॉप्स बनाओगे इसे ही हो गया मैप स्टेट टू प्रॉप्स फोर कॉमन फ्रेंड्स मान लो ठीक है ऐसे ही एक और बना लिया स्टेट में से डेटा निकाल के ये हो गया फोर कॉमन फ्रेंड्स फोर लाइक जिन्होंने कोई रेस्टोरेंट लाइक कोई पेज लाइक ऐसे अलग-अलग बनाओगे और फिर क्या करोगे एक्सपोर्ट भी मल्टीपल बार करोगे एक्सपोर्ट कॉन्स्ट नेम कर लोगा मल्टीपल करना है यह वाला कंपनेंट हो गया इसको मैंने दिया मैप स्टेट टू प्रॉप्स फॉर कॉमन फ्रेंड्स यह हमारा देखो जो कंपनेंट है वह फ्रेंड और डिटेल है बट समझ जाएँगे बहुत ना समझना थोड़ी सी export const common friend list और ऐसे ही export const page likers जिन्होंने page like करकता है यहाँ पे अब दो मिनट के लिए यहां पर समझ लो यह फ्रेंड लिस्ट कंपोनेंट है हमारा तो मैंने फ्रेंड लिस्ट कंपोनेंट को दो बार कनेक्ट से गुजार दिया और दो अलग-अलग कंपोनेंट आउपुट में आ गए लेकिन HOC ने दोनों में अलग-अलग डेटा पास कर रखा है जहाँ page likers दिखाने हैं, वहाँ page likers दिखाओ, बात समझ आ रही होगी, same component, दो अलग-अलग map state to props की help से, reusable कर लिया है, जहाँ पे आपको friend list में common friends दिखाने है, वहाँ पे वो वाला map state to prop डाल दो, जहाँ पे आपको like वाले दिखाने है, वहाँ पे वो वाला map state to prop डाल दो, जब आप map state to prop change करोगे, तो component की prop भी change हो जाएगी, बात समझ आ रही है तो देखो यूजबल भी हो गया और यूज करना भी आसान रहा एक बार आपने कॉमन फ्रेंड लिस्ट कंपनेंट बना लिया ऐसे करके अब आप इस कॉमन फ्रेंड लिस्ट कंपोनेंट को मल्टीपल बार यूज कर सकते पेज लाइक से भेजता है बात समझ आ रही है हमको what we want is चीजे reusable भी रहें but चीजे easy to use भी रहें समझना दोनों चीजों में conflict है ये दोनों में आपस में लड़ाई है easy to use और reusable इन दोनों में हमेशा लड़ाई है इजी टू यूज बनाने की कोशिश करोगे तो थोड़ा रियूज अबिलिटी कम होने लग जाएगी रियूज अबिलिटी की कोशिश करोगे तो इजी टू यूज कम होने लग जाएगा स्मार्टनेस है कि दोनों चीजें एक साथ कैसे कर पाएं ठीक है ये आ यू गेंट थिंक ओफ देम एस सास बहु एंड यू आर द ब्रिज दो तो आपका जामे घर में शांते बनाए रखने का मुझे सो कैसे मैनेज करोगे यहाँ पे हो रखे है अब मैं बताता हूँ लड़ाई कैसे है reusable का मतलब है कि वो flexible होगा तब ही तो reuse हो पाएगा कहीं उसको कुछ दे दो कहीं उसको कुछ दे दो तो जब उसको reusable बनाओगे reusable का मतलब है automatically configurable ठीक कि उसको न जहां चाहूँ अपने हिसाब से एडजस्ट करके यूज कर सकते हो ठीक है अब तुमने न एक वह देखा होगा एक स्विस नाइफ आता है लोग प्राणिक की काम का होता है नहीं होता लेकिन लोग छोटे-छोटे से स्विस नाइफ कार्ड जाते हैं मैं तुमको दिखा देता हूं एक बात इमेजेस डॉट कुवर डॉट कॉम अ तो स्विस नाइफ वेरी रियूजेबल ऐसा जो गार्ड इसमें ना कुछ यह भी है छोटा साइज में यह निकालो यह भी बन जाता है वह भी बन जाता है बता नहीं क्या-क्या बन जाता है ठीक है और चलो यह तो फिर भी इतना मुश्किल नहीं जो चाहिए वह निकाल चीज बच्चों के टॉइस भी आते हैं कि वह गाड़ी भी बन जाते हैं वह रोबोट भी बन जाते हैं लेकिन वह जो टॉइस ऐसे होते हैं उनको यूज करना बड़ा मुश्किल होता है अब उसको गाड़ी से रोबोट बनाना है तो उसको रोडो में रोडो ठीक है जितना रियूजेबल बनाओगे उतना उसमें इनपुट्स डाल डाल के उसको चेंज करना कंफिग्रेबल करें इजी टू यूज इस कि भाई यह बस यही काम करता है जो चीज एक ही काम करती है उसमें ज़्यादा दिमाग नहीं लगाना पड़ता ना कि बस उठाओ यूज करो हम दोनों में बैलेंस बनाना है हमको वो बैलेंस हम यहाँ बना रहे हैं ये reusable component है और तो हमारा component reusable है बट ये जो component है ये easy to use है क्योंकि अब जहां जहां आपको common friend list दिखानी है उसको आपको डेटा क्या पास करना है वो आपको ये ये component आप कैसे use करोगे ऐसे समझना जरा जहां भी use करोगे का करोगे common friend list और बस सिर्फ ऐसे कोई डेटा बेटा पास नहीं करोगे डेटा कहां से पास हो रहा है डेटा अपने आप connect पास कर दे रहा है map state to prop की help से अब common friend list है इसे ही friend list है अगर आप ये use करोगे न तो आपको इसको data देना पड़ेगा क्योंकि friend list जो है ये वो friend की list basically data मांगेगा न कि इस अ friend list मैं तो reusable हूँ मुझे तो पता ही नहीं कौन से friend दिखाने है मुझे data दो पर friend के click पे क्या करना है मुझे वो भी दो तो ये तो data मांग रहे है ये वाला इसका specialized format है कि friend list को हमने specialized कर दिया कि इस मैप स्टेट टू प्रॉप की हेल्प से तो मैं कंपोनेंट रियूजेबल भी रहा बट कंपोनेंट को बार-बार डेटा न पास करना पड़े तो मैंने उसके एक स्पेशल फॉर्म भी बना ली कि जब भी कॉमन फ्रेंड लिखाना होगा इसके एक स्पेशल कंपोनेंट बनाकर रख लिया बात समझ आ गई होगी शायद यह तो अब मल्टीपल मैप स्टेट टू प्रॉप आपको simple map state to props तो रखनी सकते हैं कुछ तो बदलना पड़ेगा न जब दो बनाओगे तो एक को map state to props one बोल दो एक को map state to props two बोल दो जादा लंबे नाम नहीं रखने जो भी नाम रखने या फिर इसको बोल दो फॉर्मन फ्रेंड्स मैप पर तो ऐसा जरूरी नहीं कि नाम मैप स्टेट टू प्रॉप्सी रखना इसको बोल दो पेज लाइफ मैप अलग भी रख सकता लेकिन जब एक हो तो फिर मैप स्टेट टू प्रॉप्सी रख लेते हैं अभी तो आपको एक ही तो जब एक ही है तो फिर तो मैं पिस्टेट प्रॉपी बोल दो उसको और जब एक ही है तो फिर तो उसको एक्सपॉर्ट डिफॉल्टी कर दो फिर एक वैरियेबल नाम क्यों देना उसको एक्सपॉर्ट डिफॉल्ट पुड़ी यहां और यहां पॉडर लिस्ट आई हॉप मैं खुद से बातें नहीं कर रहा था समझ आ गई होगी बात ठीक है तो पहली चीज तो यह अब आगे हम बात कर रहे थे कि dispatch भी हटा दें, dispatch कैसे हटाएंगे, dispatch ऐसे हटाएंगे, ऐसी एक map dispatch to props बना लो, वो यहाँ पे connect को second parameter में देगा, तो connect दो parameter लेता है, HOC देने से पहले, आप चाहो तो एक ही pass कर दो, अज़ा एक और चीज दिखा दो, बलकि sorry पहले, अगर मैं यह map dispatch to props ना बनाओं, पर connect यूज़ करूँ, तो connect क्या करता है, connect हमारे component को क्या-क्या prop देगा पहली prop तो वो देगा ये props देगा basically right order map, order products जो भी map state to prop में हमने define कर रखी हैं कि वो props connect हमारे component तक पहुचा देगा connect का जो connect का दिया हुआ जो HOC है वो पर इसके अलावा वो एक prop और पहुचाता है dispatch जो अभी आप यूज डिस्पैच से कर रहे थे अब आपको यूज डिस्पैच करने की जरूरत नहीं है आपको डिस्पैच प्रॉब में ही मिल जा रहा है लेकिन अगर प्रॉब में मिल रहा है तो डिस्पैच और डिस्पैच पसिकली इसका फंक्शन जो की एक्शन लेता है यूज डिस्पैच तो यूज डिस्पैच फिर मैंने यहाँ पर कॉल कर दिया यूज डिस्पैच नहीं यूज करना पड़ रहा बाइद अब हमको ओलरेडी लेकिन भले यूज डिस्पैच नहीं करना पड़ रहा हो जो यह फंक्शन हमको मिला यह फंक्शन में दिमाग तो फिर भी हमारा खप रहा है ना बस use dispatch नहीं call करना पड़ रहा है यहाँ पर जो hook use कर रहे थे hook की जगा मुझे को वो dispatch भी connect जो है props में दे दे रहा है तो मैं एक बार तुमको चला के दिखाता हूँ लेकिन अच्छा इसमें तो अच्छा dispatch तो हम नहीं use कर रहे रखा है तो यह देखो मैंने इसको किया reload order id के base पे dispatch हुआ होगा action तबी तो data है order detail loaded यह action dispatch हुआ यह कहां से dispatch हुआ use effect में हमने यहाँ पर dispatch लिख रखे है order detail loaded dispatch हो रहे हैं but बिना use dispatch के dispatch हो रहे है but अभी भी component को दिमाग लगाना पड़ रहा है कि कौन सा action dispatch करूँ क्या करूँ यह हम यह भी हटाईंगे पहले तो खेरी है पूरा API call ही हमारी सागा में move कर जाएगी वैसे तो लेकिन फिर भी action तो component dispatch करते हैं ना button button के click पे उस पे तो वो actually में तो यहाँ पे जो होना है जब redux saga use कर लेंगे तो यहाँ से तो बस order detail load करने का action dispatch होना है फिर actual loading करके order detail loaded वाला action तो saga dispatch करेगा but the thing is कि हम dispatch हम को use ही ना करना पड़े प्रॉपर function मिले हम बस सीधा function call करें हमें इस बात से मतलब ना हो कि वो function redux यहाँ component को पता चल रहा है कि अच्छा हम ना redux यूज़ कर रहे हैं तब ही मुझे dispatch मिला है तब ही मैं action dispatch कर रहा हूँ ऐसा होना चाहिए component को पता ही ना हो कि हम redux यूज़ कर रहे हैं जहाँ पे redux यूज़ हो इनि रहा है हमारा component दूसरे project में testing, vesting सब आसान हो जाती है इसलिए रियूजिबिलिटी तो ही पर पर यह तीनों पर पर से जो मैंने बताया रियूजिबिलिटी यूनिट ट एंड यूज़ टेक्टर ऑफिस इन आवेड रियूज़ एबिलिटी ही है अगेंट अब इसको कैसे सॉल्ड करूंगा कि डिस्पैच उसको भनक भी ना लगे कॉम्पोनेंट इतना डंब हो जाएगी उसको यह भी ना पता चले कि डिस्पैच यूज कर रहा है यह इस पैसे उसको हिंट लग जाएगा कि हम प्रदक्ष यूज करें उसको हिंट भी ना लगे तो हम यह फंक्शन करेंगे मैं इस पैसे प्रॉब्स और यह इस फंक्शन का काम है अ आप अब डिस्पैच टू प्रॉप्स में तो हम कह रखेंगे ऑब्जेक्ट भी पास कर पाएंगे मैं डिस्पैच टू प्रॉप्स में मैंने एक फंक्शन बना एक बस ऑब्जेक्ट बनाया फंक्शन भी नहीं बनाया और यहां में क्या कर रहा हूं इस होंगी इस ऑब्जेक्ट में यह तो ऑब्जेक्ट रिटर्न कर रहा था फंक्शन था यहां पर तो मैं सीधा ऑब्जेक्ट बना रहा हूं एन ऑब्जेक्ट विद प्रॉब्ड नेम्स एड्स पीज एंड फंक्शन एंड फॉर एंड एक्शन रिएटर्स एस ऑब्जेक्ट इस अ keys क्या होंगी prop के names और objects क्या होंगे action creators action creator तो हमने बनाए थे इसे ये order detail loaded action action creator क्या होता था एक ऐसा function जो कुछ data लेता हो और एक action का object return करता हो तो हमने action creator तो already बनाई रखे है order detail loaded action जैसे एक बना हुआ है तो ये order detail loaded action को ये दो मैं क्या कर रहा हूँ what is this this is object structuring order detail loaded action नाम की यह हटा देखो action word order detail loaded key के अंदर order detail loaded action function मैंने action creator मैंने डाल दिया key यह हो गई value यह हो गई अगर मैं पहले ऐसे लिख दे रहा था तो क्या हो जा रहा था same key के अंदर same value right this is द शॉर्टकट फॉर देश हम यह कई बार पड़ चुके हैं सेम की के अंदर अगर उसी वैरियेबल का डाटा डालना हो तो अब यह दो बार देखने की जगह स्किप कर देता है बट मैं लिख दे रहा हूं कि मैंने की नाम का नाम फॉर चेंज कर देखा अब देखो होगा क्या इस और यह मैं अब डिस्पैच टू प्रॉप मैंने पास कर दिया यहां इससे यह हुआ कि मेरे कंपनेंट तक ओडर डिटेल लॉडेड नाम का एक प्रॉप जाना शुरू हो जाएगा और जब उस अ वो प्रॉप भी कैसा प्रॉप होगा, एक function प्रॉप होगा, और उस function को जब call किया जाएगा, तो जिस data के साथ उस function को call किया जाएगा, उस data के साथ यह वाला action dispatch हो जाएगा, इस function को call करो, यह action dispatch होगा, यह तो key है, इस जो यह key का नाम है, यह तो object की key है, आप जो भी इस key का नाम रखोगे, उसी नाम से प्रॉप पहुँच जाएगी component तक, तो. अब यहाँ पर प्रॉप पहुंचेगी कंपोनेंट तक और डिटेल लोडेट और डिटेल लोडेट विल बी अफ फंक्शन और कैसा फंक्शन होगा सीम ऐसा फंक्शन होगा वह सेम वह डाटा लेने वाला जो डाटा यह फंक्शन लेता है यह एक्शन प्रिवेटर लेता है समझ जाए ध्यान से इसमें और इसमें फर्क्या होने वाला है अ ये action creator है ये action create करके उसे साथ के साथ dispatch भी कर देता है ये dispatch नहीं करता ये तो बस action create करके दे देता है ये वाला action create करके इसकी help section create करेगा और उसको dispatch भी कर देगा तो ये data क्या लेगा वोई data लेगा जो ये लेता है ये order लेता है यह क्या लेता है order detail loaded action order का object लेता है ठीक यह भी क्या लेगा order का object ही लेगा लेकिन यह order का object लेके बस action बना के दे देता यह order का object लेके इसकी help से action का object बनवाएगा और बनवा के उसको dispatch भी कर देगा जो data आप इसको दोगे वो इस data कि ऑब्जेक्ट बनाकर दे मुझे यह ऑब्जेक्ट बनाकर देगा जब ऑब्जेक्ट बनाकर दे यह भी कैसा है ओडर का ऑब्जेक्ट लेने वाला रिटर्न कुछ करता नहीं है ओडर डिटेल लोड़ेड अब ओडर डिटेल लोड़ेड प्रॉब कर लिया अब मैं कहीं भी डिस्पैच नहीं यूज करूंगा ओडर डिटेल लोड़ेड जब ओडर डिटेल ओडर ओडर लोड़ हो गए तो मैंने ओडर डिटेल ओडर की डिटेल लोड़ हो गई तो मैंने कॉल कर दिया ओडर डिटेल लोड़ेड और उसको जो यहां पास कर रखा था response.data पास कर दिया अब देखो component के हिसाब से सोचो component को पता है कि उसने एक function मिला उसे prop में उसने वो function data के साथ call कर दिया अब component को नहीं पता है कि यह function action dispatch कर रहा है या क्या कर रहा है आप चाहो इसी component को किसी दूसरे project में use कर लो वहाँ पे prop में दूसरा function दे देना अब ज़रूरी थोड़ी नहीं है कि जब भी आप इस component को use करो तो जो इसके पास function आए वो connect की help से ही आए समझना मेरा component है reusable मैं चाहूँ अगर मैं अपने component को किसी दूसरे project में use करना चाह रहा हूँ तो मैं ये सारी की सारी चीज़े map state to prop map dispatch to prop और यह होसी में रैप करना यह कोड इसी दूसरी फाइल में मूव कर दूंगा यहां मैं सिर्फ कंपोनेंट रखूंगा और डिटेल पेज डॉट टीएस एक्स ओडर डिटेल पेज विद रिडक्स टॉट टीएस एक यहां मैंने यह बना लिया एक्सपोर्ट एक विलोग मेक सेंस इन अब इतना भी देख जाओ ओडर डिटेल पेज और ओडर डिटेल पेज में अच्छी वाला ओडर डिटेल इसको नोटा सकते हैं विद रिडक्स यहां से मैंने यह हटा दिया और यहां तो मैंने एक्सपोर्ट डिफॉर्ट सुनाओ कर दो एक्सपोर्ट डिफॉर्ट मैमो मैमो में मैंने यहां पर डाल दिया यहां से इसको वह उपड़ाई थी समुझना जरा चीज लुको अभी इसको देखो इसमें अब रिडक्स का नाम और निशान नहीं बचेगा कहीं पर भी में रिडक्स या रिडक्स रिलेटेड अ कि कुछ चीज इंपोर्ट नहीं करूंगा एक्शन का इंपोर्ट हो रखें इन डिस्पेच चुट्डी स्पेश तो मैंने हटाई दिया डिस्पेच पाव की जरूरत नहीं है तो हम डिस्पेच तो यह देखो इस कंपोनेंट को देखो जरा आप इसमें अश्लील रियक्ट रियक्ट राउटर डॉम मॉडल यूज और अखिन अ लेकिन इस component में कहीं भी Redux related कोई चीज़ ना import हो रही है, ना use हो रही है यह component अपने आप में पूरी तरह काम करता है आप इसको बस एक order का map दे दो और वो order का map Redux से निकाल के दो, चाहे कहीं और से निकाल के दो, कोई रिक्कत नहीं इसको भी हम fix करेंगे, order map के जगह यहाँ पे single order लेंगे लेकिन यह component हमारा अपने आप में पूरी तरह usable है आप इस file को किसी दूसरे project में एंड पीएम इंस्टॉल कर लो इसको एक लाइब्रेडी में शिप कर देंगे देखेंगे वह सब कैसे होता है मैं अब कॉर्स में तो नहीं देखेंगे इसमें आगे थोड़ी से अड्वांस चीज है छह महीने के पॉज में नहीं हो तो लेकिन कोई मतलब नहीं लेकिन आप अगर किसी प्रोजेक्ट में रिडक्स यूज कर रहे हो तो यह प्रोजेक्ट स्पेसिफिक है ये reusable नहीं है, हर project का अलग structure है मानलो दो project हैं जो Redux use भी कर रहे हैं मानलो मैं Flipkart की team हैं, Flipkart की engineering team हैं मानलो हम, तो Flipkart में पाँच project है, पाँच में से दो Redux use कर रहे हैं तीन में Redux use नहीं हो रहा है मानलो तो जिन दो में Redux use हो रहा है, उन दोनों में भी ये code तो अलग होगा क्यों, क्योंकि उनका रिडक्स का स्ट्रक्चर अलग होगा, दोनों में अलग डेटा है, एक हो सकता है, दोनों में ओडर डिटेल है, लेकिन एक है जिसमें कि ओडर की डिटेल मैनेजर्स देखते हैं कि हमारी कंपनी कैसी चल रही है कितने ओडर आ रहे हैं उनके लिए डेशबोर्ड है वो अलग रियक्ट प्रोजेक्ट है फ्लिपकार्ट के मैनेजर्स के लिए एक प्रोजेक्ट है फ्लिपकार्ट के वेंडर्स के लिए जो order की detail के लाव और बहुत सारे data redux store का structure अलग होगा तो ये तो अलग अलग हर component हर project को अपना बनाना पड़ेगा लेकिन हर project को बस ये tension लेनी है कि ये जो मेरा order detail page है इसको मैं क्या data दूँ अब ये तो project ही बताएगा न क्या data दिखाना है order detail page में कौन सा order दिखाना है ये तो reusable नहीं हो सकता reusable होता तो देखो ऐसा नहीं हो सकता कि npm install करो और सब कुछ बन गई है एंट्रीम इंस्टॉल से आपको चीजें मिल जाएंगे लेकिन फिर उन चीजों को कंपोनेंट मिल जाएंगे बने-बनाएं जैसे एंट डिजाइन है बहुत अच्छी पर प्लेड लाइब्री उससे अच्छे का साफ कोंपनेंट मिल जाएंगे बने-बनाएं और भी बहुत सारी मैटीरियल लेकिन फिर और आपको और भी बहुत सारी चीजें मिल जाएंगे लेकिन उनको जोड़-जोड़ कौन सा देना है वह आपको डिसाइड करना पड़ेगा हर प्रोजेक्ट में अ है अब यहां पर हम एक बार चीजेंट कर लेता हूं तो ओडर डिटेल पेज एक सिंपल साफ सुत्रा पंपोनेंट है जिसको कि रिडक्स से कोई मतलब नहीं है लेकिन order detail page with redux ये उसी component को data देने के बाद बना हुआ component है ये इस component का काम इसका काम है इसमें कोई component एक HOC हमने use कर रखा है वो HOC connect HOC वो इस component को redux में से data देके और एक नया component export करता है तो यह देखना जरा अब इधर मैं गया जरा app.tsx में अभी हम order detail page order list page मैं import कर रहा हूँ कहां से order list page from order list page from.slash order list page तो यहाँ पे error आ रहा है क्या error आ रहा है वो कह रहा है कि भाईया यह तो आप इसको props तो दो order detail को क्या क्या props चाहिए orders map चाहिए orders product map चाहिए ये दोनो props चाहिए इसको और order detail loaded भी चाहिए इसको तीन props चाहिए this component asks for three props तो component यूज़ करोगे तो तीनो props तो देनी पड़ेगी लेकिन आप देखो मैंने क्या किया order detail page with redux order detail page मैंने यहाँ से import किया अब नहीं मांग रहा कुछ भी क्योंकि जो विद रेडड़क्स वाला है ये डेटा देने के बाद कॉंपोनेंट को सिंपल है चोसी का क्या काम होता है अगेन एक कॉंपोनेंट ले और एक नया कॉंपोनेंट दे इसने ओडर डेटेल पेज लिया और एक ऐसा कॉंपोनेंट दिया जो डेटा को ओडर डेटेल पेज की तरह ही दिखाता है बट वो नया कॉंपोनेंट जब मैं यहाँ पर order detail page यूज कर रहा हूँ तो actually मैं वो order detail page component नहीं यूज कर रहा हूँ जो मैंने बनाया है मैं वो यूज कर रहा हूँ जो HOC के बाद निकला है और HOC में order detail page डालने के बाद जो component निकला है उस component को यूज करना आसान है उससे आपको कुछ data नहीं देना क्यों क्योंकि ये वाला order detail page इसको let's call it order detail page न्यू यह जो ऑडर डिटेल पेज न्यू है जब आप इसको यूज करते हो तो यह ऑरिजिनल ऑडर डिटेल पेज कंपनेंट डिस्प्ले करता है बट ऑरिजिनल कंपनेंट को जो जो डेटा चाहिए यह खुद से दे देता है आपको नहीं देना पड़ रहा प्रॉप्स यहां पर यह वाला कंपनेंट है न्यू न्यू इस कनेक्ट के बाद जो मिला हम state2prop की help से और map dispatch2prop की help से चीज़े निकाल के इसको खुद दे दे रहा है component का new बोल लो order detail page विद रिडक्स बोल लो इसको लेकिन नॉर्मली आप क्या करोगे ऐसे अलग-अलग फाइल में बनाओगे ही नहीं सेम फाइल में रखोगे जब तक किसी दूसरे प्रोजेक्ट में यूज नहीं करना कंपोनेंट आप लाइब्रेडी की तरह प्रिप्प नहीं करते वह सब कार्य नहीं कर रहे और आप फिर सेमी नाम से यूज करोगे क्योंकि बाहर ओरिजिनल मतलब जब test करूँगा, समझना, जब use करूँगा, तो सीधा connect के बाद वाला use करूँगा, क्योंकि उसको data नहीं देना पड़ता, use करना आसान है, but चीजे अलग-अलग बना रखी हैं मैंने, जब मैं test कर रहा हूँगा, तो हर चीज को अलग-अलग test करूँगा, use भले ही final ची इसको मैं यूज करूँगा जो ओरिजिनल वाला है सिर्फ टेस्टिंग के टाइम पर ऐसे समझना जरा समझो थोड़ा सा मॉडिलर चीजें बनाने का फायदा मान लो हमारा मबाइल फोन है वो मबाइल फोन मॉडिलर हुआ करता अभी हमारा मबाइल फोन इस वन बिग थिंग सब कुछ एक साथ है इसे कंपने ने बनाने की कोशिश की थी आज बड़ा थिंग चलानी मॉडिलर फोन का मतलब तुमने लेगो अ यह लीगो जो भी बहुत है इसको बच्चों की गेम्स होते हैं देखे होंगे रहे इसमें ऐसे पीसी जोते हैं जोड़-जोड़ के कुछ भी शेप बना लो हट बना लो महल बना लो गाड़ी बना लो रेट बच्चे खेलते रहते हैं इसे ब्लॉक्स जोड़-जोड़ के तो ऐसे ही अगर ब्लॉक हो कि मुझे को ना अब कोई मेरे जैसा इंसान है जो कि जिन्दगी में चार फोटो नहीं खींचे होगे, डोक्यूमेंट के फोटो खींचे होगा, कभी किसी पेपर पेपर इनसानों के तो खींचे ही नहीं, तो मुझको कैमरे की क्या ज़रूरात है, इतने मेगा पिक्सल, इतने मेगा पिक्सल, बट हो सकते हैं मालो मैं वीडियो ग और मुझको screen बड़ी चाहिए लेकिन क्योंकि मैं game खेलता हूँ तो बड़ी वाली screen लिये वो जोड़ा मैं mobile बन गया तो अगर जितनी चीज़े छोटी-छोटे हिस्सों में होंगी reusable उसका एक फायदा तो यह है कि flexibility आ गई आपके पास तो reusable है चीज़े testing आसान है अब मालो मेरा mobile चल नहीं रहा अब जब भी आपका मोबाइल खराब हो जाए, कंप्यूटर खराब हो जाए, कभी भी आपका कंप्यूटर खराब हो जाए, अब कंप्यूटर वाले के बास लेके जाओ, वो हमेशा बोलेगा, जी मदरबोर्ड फुग गया है, चाहे एक कहीं कुछ हिला ही होता है, जी मदरब कि क्या यार मोट लैपटॉप चल नहीं रहा बैटरी खराब हो गई विद इसकी निकाला सब्सक्राइब और अच्छा चलो स्क्रीन चेक करते पूरे लैपटॉप में सो चीजें कैसे test करोगे कि क्या खराब हुआ है लेकिन अगर सब चीजों को अलग-अलग test किया जा सके तो आसान हो जाएगा न तो यही unit test का concept है कि हम हर चीज़ को अलग-अलग test कर लेते हैं तो गलतियां पकड़ना आसान रहता है कि कहां गरबड हो रही है end-to-end test वैसे देखा जाता है तो unit test का उससे बड़ा purpose तो bugs-bugs से भी जादा है कि वो modular भी enforce करता है बाकी कई बार चीजें अलग-अलग सही काम करती होती हैं, लेकिन मिलके सही नहीं करते, तो integration, end-to-end test भी कुछ होता है, anyway वो अभी का topic है नहीं, तो हमना कुछ अब ऐसा ही कर रहे हैं, जब हम testing करेंगे तो, the point I was trying to make was, जब आप testing करोगे, तब आप सबको अलग-अलग करोगे ठीक है यहां बैटरी तो ठीक है तसली हो गई चलो दूसरी स्क्रीन चेक करते हैं स्क्रीन कहीं अब जैसे आपका कंप्यूटर होता था पुराना ल जो desktop होता था वो modular होता था उसमें keyboard अलग होता था mouse अलग होता था screen अलग होती थी processor अलग होता था UPS अलग होता था battery भी उसकी अलग होती थी एक अलग से डब्बा सा होता था UPS बोलते थे ठीक है अब कुछ खराब हुआ तो आप हर चीज अलग अलग test कर सकते हैं अपना mouse निकालो दोस्त के में लगा के देख लो हैर mouse तो चल रहा है लेकिन जब आप use करोगे तो use अब सब को एक साथ करोगे final को use ऐसा नहीं करोगे कि पूरा computer घर बढ़ावा mouse लिये भूम रहे हैं mouse यूज़ कर रहे हैं अकेला mouse तो किसी काम का है नहीं तो that's what I'm trying to say जब आप use करोगे कहीं भी पूरे project में तो आप ये करोगे जो final है ये सब जोड़ जाड़ के map state to prop भी लिया map dispatch to prop भी लिया order detail page भी लिया इन सब को connect की help से जोड़ा export किया इसको use करोगे जो यहां से export हो रहा है तो मैंने जब मैं use कर रहा हूँ आ गया app component so app component में मैं final देखो order detail page with redux वहाँ से जो default export है curly brace तो लगा ही नहीं तो default export अब नाम तो मैं इसका कुछ भी रख लूँ यहाँ पे तुमको पता ही है वो तो default export को तो आप कोई भी नाम दे सकते हो named export नहीं है नाम कुछ भी रखो लेकिन मैं यहां की default export use कर रहा हूँ use यही करोगे लेकिन जब testing वाला code लिखोगे उसमें यह final को use नहीं करोगे इसको अलग इसको अलग और इसको अलग तो यह अलग से तब use होगा जब या तो दूसरे project के लिए ship कर रहे हो library में या फिर testing का code लिख रहे हो, testing के code में यह use होगा यह अलग use होगा, यह अलग use होगा लेकिन actual code में जो project का code है जो हम सब कुछ routing component वो सब जो कर रहे हैं उस code में connect का output use होगा ये directly use नहीं होगा ये भी directly use नहीं होगा ये भी directly use नहीं होगा testing में ये सारे अलग-अलग use होगे ठीक है ये important है समझना की ये बना रखे इसका भी कहीं use है testing test इसको बतेंगे कि टेस्ट माउस अलग होगा कीबोड अलग होगा सब अलग अलग टेस्ट करेंगे कि कहां गर्बड़ है और जब काम करेंगे तो सबको मिलाकर जो फाइनल है पूरा कंप्यूटर उस पर काम करेंगे सबको जोड़कर ठीक है तो यह बात समझ आ गई तो मैं डिस्पैच टू प्रॉप्स मैप स्टेट टू प्रॉप्स अब यहां लेकिन देखो एक यह गर्बड़ है जो इसके बात करते हैं यह क्या यह क्यों बताती है कि कोंपोनेंट अ दिखा रहा है order की detail और उसको पूरा order का map पास कर रखा है सिर्फ order पास होना चाहिए तो यहाँ पे ने इसकी props कुछ ऐसी होनी चाहिए order and products products, order and products और यहाँ पे मैं और प्रोडक्ट की डाटा टाइप हो जाएगी प्रोडक्ट की असा होना चाहिए अब लग रहा है यहां ची ओडर डिटेल है ओडर डिटेल को जब आप इस कंपनेंट को यूज और उस particular order में जितने products हैं वो products ऐसे होना चाहिए और जब ऐसे होगा तो एक जो मैं destructuring कर रहा हूँ तो यहाँ पे भी order और यहाँ पे products और अब यहाँ पे मुझको यह सब कहानी भी नहीं करनी पड़ेगी order id तो हमारा component थोड़ा और simple हो गया बल्कि इस order id की भी यह नहीं order id चैनल में यहाँ यूज कर रखे तो चलो पढ़ा रहना लेता हूँ लेकिन देखिए इसकी भी ज़रूरत नहीं पड़ेगी लेकिन अब एक कहानी है component को अब यह इस component को prop देने की जिम्मेदारी किसकी है इस map state to prop किया तो पहले बात तो अब इसको order map नहीं देना order देना तो यहाँ पर इसको order कर दिया लेकिन order की का नाम तो order कर दिया देतो अभी भी order मैप ही रहे हो ना तो यह हमको fix करना पड़ेगा ऐसे यहाँ पे इसको products दे दिया लेकिन प्रोडक्ट नाम प्रोडक्ट के नाम से डेट दे अभी भी प्रोडक्ट का मैप रहे हो तो नाम बदल देने से कुछ नहीं हो जाता डाटा तो अभी भी एक ऑर्डर न जाकर पूरा मैप जा रहा है ना प्रोडक्ट अच्छा यह इन कंपेटेबल है तो हमने डाटा यहां पर अब इसको कैसे देखो एरर भी दिखा रहा है यहां पर कि भी आप तुम अ कि ओडर के नाम पर क्या भेज रहे हो मैं इसको तो कुछ और चाहिए आप तो मैं भेज रहा हूं भली भेज और देखो एक तो मैंने यहां पर इस की को कुछ और कर दिया जिससे पहले था ओडर्स मैप एक कमाल की बात है कि यह वह नहीं दिखा वह देखना चाहिए वहां पर एक मिनट को कि कहीं नहीं रहा है यहां पर यहां प इस component को ये component मांगते है orders and order and products अब वो दोनो props connect तो pass कर नहीं रहा connect तो ये दोनो pass कर रहा है तो जो नया component बचा उसके अंदर दो props ऐसी हैं जो की basically समझना थोड़ा सा इस चीज को ये original component तीन prop मांग रहा है इन तीन prop में से और इस component को फिर हम connect के अंदर से गुजारते हैं, right? तो जब हम इस component को, जो कि ये तीनों prop लेता है, ये component, ये तीनों prop लेता है, जब मैं इसको connect के अंदर से गुजारूँगा, तो मुझको इस component को connect के अंदर डालूँगा, एक नया component मिलेगा, वो जो नया component है, वो component क्या क्या prop मांगेगा, वो component वो वो prop मांगेगा, इन तीनों में से जो की connect नहीं देगा अगर ये तीनों connect ने दे दी तो जो नया component है वो कुछ भी prop नहीं मांगेगा वो कहेगा कि जो नया component है उस नया component को ये ही component तो use करना है internally connect को आपने ये component दिया नया component मिला तो जब जब आप नया component call करोगे तो finally ये ही component call होगा right वो नया component इसी पुराने component से जुड़ा हुआ है HOC क्या करता है एक component को लेके एक नया component देता है और वो नया component उस original component से जुड़ा हुआ है आप नया call करोगे तो behind the scene call तो यही होना है लेकिन जो original है वो 3 prop मांग रहा है connect ने 3 में से मान लो ये दोनों दे ली तो जो नया component है वो कहेगा original को 3 चाहिए 3 में से 2 का जुगार तो मैं कर लूँगा connect की help से जो वह मैप स्टेट टू प्रॉप की हेल्प से बट तीसरी तो मुझे फिर भी चाहिए अगर मुझे तीसरी नहीं दोगे तो मैं आगे ऑरिजिनल वाले को कैसे दूंगा तीसरी बात समझ आ रही है तो यही काम हो रहा है यहां पर ऑर्डर डिटेल पेज को हमने कनेक्ट में से गुजारा और यह मैं इस वाले मैप स्टेट टू प्रॉप के साथ तो यह इसको ऑर्डर मैप दे रहा है प्रोडक्ट वह देनी रहा तो फिर यहां पर आ रहा है कि यह जो आपने नया कंपोनेंट बनाया यह नया कंपोनेंट अब ऑलडर्स एंड प्रोडक्ट्स मांग रहा है यह कह रहा है ओरिजिनल वाले को ऑलडर एंड प्रोडक्ट चाहिए और वह टू प्रॉप में चेंज कर दिया इसको कर दिया ऑलडर इसको कर दिया अ प्रोडक्ट अब यहां से एरर चला जाएगा अब यहां से एरर चला गया अब वह कह रहा है xyz को कोई प्रॉप की जरूरत ही नहीं है क्योंकि xyz कॉल करेगा xyz कौन से है यह xyz है यह वाला यह कॉल करेगा इसको और इसको तो जो प्रॉप चाहिए वह यह ओडर प्रोडक्ट ओडर डिटेल लोड़ेड सब तो पूरी हो गई अ तो जो कनेक्ट से नया कॉमपोनेंट बना वो कह रहा है मुझे कोई प्रॉप नहीं चाहिए मुझे ओरिजिनल वाले को जो जो डेटा देना है वो मैं अपने आप जो नए वाले को प्रॉप में कुछ नहीं चाहिए, ओरिजिनल वाले को तो प्रॉप चाहिए है अपनी, लेकिन उन प्रॉप का अरेंजमेंट यहां से हो जा रहा है, अब वहां से एरर चला गया, लेकिन यहां एरर आने लग गया, यहां क्यों आ रहा है, वो कह रहा है यार तु यह ऑन प्रॉप्स है अभी रुचा चलिए इसको फिलाल के लिए इसको एनी कर देता हूँ समझाने में आसान रहेगा यह ओरिजिनल कॉंपोनेंट की वो प्रॉप्स है जो प्रॉप्स यहां से पूरी नहीं हो पा रही समझना देखो रिक्कत यह है कि ओडर इसको कंप्रॉप में मिले उसके लिए हमको ओडर आईडी पता होनी चाहिए और ओडर आईडी कहां से आ रही है यूआरल में से आ रही है तो यह यह वहां पर कैसे कि वहां पर भी हम यूआरल में से निकालें बेसिकली इसका लिए है हम इसको भी राउटर को भी हम एचोसी पर मूव करेंगे अभी हम राउटर क्या यूज करें यूज बेरेंस इसकी जगह भी हम रिडक्स वो रियक्ट राउटर का एक होसी यूज करेंगे जो उन्होंने देना बंद कर दिया पहले देते थे और मैं खुद का बनाना पड़ेगा एक चुकी नो ज्यादा दिमाग लगा लिया यह जरूरत नहीं है तो हम एक बनाएंगे वह यूज करेंगे तो होगा क्या उस हेल्प से हमारे कंपोनेंट को प्रॉप में ओडर आईडी मिलने लग चाहिए यहां पर नहीं चाहिए ठीक समझ ना आएगी बात समझ कि ओडर आईडी यहां ना मिलकर यहां मिलेगी प्रॉप में इसको मैंने बोल दिया ओडर आईडी जर्म नंबर एक कि यह कहां से और फिर यह मैंने यहां पर डिस्ट्रक्चर भी कर ली ओडर आईडी प्रॉप में मिलेगी यह कंपोनेंट को प्रॉप कंपोनेंट खुद नहीं निकालेगा यह यह भी बहुत इंपोर्टेंट है क्यों इंपोर्ट अब मेरा कॉम्पोनेंट फर्दर रियूजेबल हो गया अभी तक जो मेरा कॉम्पोनेंट था वह ऑलडर स्लैश ऑलडर एक सेट्स लोग चला गया जिमने अब इन एक इस पर पर यह है कि अ कि एक सिक्ट अब समझ ना थोड़ा सा अभी मेरा कंपोनेंट सिर्फ इसी यूआरल पर डिस्प्ले हो सकता था इसी तरह के यूआरल पर क्यों तो कि वह यूआरल में से ओडर आईडी निकालता था अभी तो दिमाग लगा रहा था मेरा कंपोनेंट पूरी तरह नहीं था उसने रिडक्स से डेटा निकालना बंद कर दिया था लेकिन यूआरल में से निकाल रहा था उसको और डंब करो उसको order id भी चाहिए उसको prop में मिलेगी अब मेरा component सिर्फ इस page पे ही नहीं use हो सकता मैं उसको किसी भी URL पे use कर सकता हूँ कोई हो सकता कोई ऐसा page हो जहाँ पे हम मालो हमें एक ऐसा page बनाएं जिसमें rows हो और rows को click करो तो वही रही पे row expand हो जाए समझे दिखा होगा एक तो है कि तहीं पे तो हमारा UI ऐसा है कि order पे click करो तो order का detail page फुलता है कहीं पे ऐसा है कि order पे click करो तो वही का वही expand हो जाता है, वही पे detail page दिख जाता है, URL change नहीं होता, तो वहाँ पे हम कैसे दिखाएंगे order detail page, क्योंकि वहाँ पे तो URL में से दो ID निकलेगी नहीं, URL में ID है ही नहीं, अलवा ऐसे हो, यह पेज है, मैं यही click करूँ, order यही दिख वो component तो मेरा fail हो जाएगा क्योंकि वो component तो URL में से ID उठा रहा है, URL में तो ID नहीं है तो हम चाह रहे हैं कि हम control कर पाएंगे उसे कौन सा ID का object, कौन सा ID की detail दिखानी है जिस पे click हुआ उस वाले की ID में prop में pass कर दूँ और expand कर दूँ तो this is better, हमने इसको further dump कर लिया, एक फाइदा तो यह हुआ, हमको करना ही ऐसे है, हम Redux router का भी हमेशा HOC यूज़ करेंगे तो समझना ज़राँ अब order id इसको मिल रही है prop में लेकिन यह चार प्रॉप मांग रहा है और यहां पर कितनी प्रॉप्स मिल रही है इसको यह मांग रहा है चार प्रॉप्स और जो कनेक्ट वाला है यह इसको चार में से कितनी प्रॉप्स दे रहा है तीन ओडर प्रॉडक्ट्स ओडर डिटेल लोड़ेड ओडर प्रॉडक्ट्स ओडर डिटेल लोड़ेड वट एक प्रॉप अभी भी बच जा रही है तो यह प्रॉप तो कनेक्ट का जो आउटपुट है वह ओडर आईडी लेगा यह देखो यह ले रहा है यहां पर रहेगा इन नहीं आया जो कि आना चाहिए था जो कि बड़ी अजीब सी बात है कि अच्छा भी तो यह रहा रहा है ना शेद उस वजह से अभी दिखाता यह ऑन प्रॉप्स में न यहां पर अजय को संगीत एक सुभिया कि यह ऑर्डर आईटी अमें यहां यूज कर लूंगा अमें ना ऑर्डर में पूरा मैप नहीं भेज रहा हूं अब इसमें जाएगा तो यहां से चला गया तो यह लेकिन यहां आ रहा है यहां आ क्यों नहीं रही है इसमें नहीं आई कि मैंने इट शुट प्रोवेंट एडर देर बट सर्पाइज इंग्रेट्स नॉट प्रोइंट कि आप अधिक नंबर और आईटी यहां और अ झाल झाल झाल कि इसको बंद करके ओपन करूंगा अब इस पोर्ट को कभी लटक गया हो बड़ी अजीब सी बात है कि यहां अजर नहीं दे रहा है कि एक वाइज़ एडियो डेमांड ऑडर आईडी जो ठीक है अब चाहिए एक निक्सर किन बिकॉज आफ इस एनी गुड़ा राइडियन्ट हाई, ओके, अन्य गेम भी गाड़ रहे हैं वहाँ पे, और, अन्य गेम भी गाड़ रहे हैं वहाँ पे, और, और डिटेल पेज तो ऐसी काम कर रही है मतलब वह रन टाइम पर आएगा जब रन करेंगे कि प्रॉब्लम चाहिए प्रॉब्लम नहीं मिली रन टाइम पर वैसे नहीं है गंड डिफाइंड हो जाए जाबा स्क्रिप्ट है इसको मैं एक्सपोर्ट कर लेता हूं कि अब अब पेज अ कि पेट और ठीक है चलो तो इस विश्वस्थि में हाई उड़ाता हूं मैंने ऐसे करके देखा था कि वह नहीं लिखने की वजह से ना वहां पर इन फ्रेंस कुछ और होने लग गया था तो यह देखो अब यह एक्स वाइज़ एडियो कह रहा है कि इसको आईडी चाहिए एडियो को पास कर देता हूं तो अ कि आईडी ए और डिपेज प्रॉब्स अब यह क्या मान दो अच्छा आईडी नहीं सुनिख पॉइंटर आईडी है वह कर दो कर दो कर दो कि इसको करते हैं यह क्या करोगे तुमको अभी तो समझ नहीं आएगा तो अभी पार्शल यह नहीं हो तो पर लगाते हैं थोड़ा सा ज्यादा बढ़ा तुम्हारे लिए बैठा हूं कि यह टाइप स्क्रिप्ट मुझे लगता है बिगनर्स को शेयर ना रियल जावास्क्रिप्ट में करा लें काम तो बेटर है विल्डी थिंग फॉर नेक्स्ट कोर्स की क्या करना चाहिए यह बेसिकली यह मुश्किल होता है बिगनर्स के लिए ना एक तो आपको समझो पर से टाइप स्क्रिप्ट साथ में तो देखिए और मैं लिखो शेयर थिंग करूंगा ब और प्रॉप्स जो है वह इसमें से कुछ कीज होंगी क्योंकि कुछ कीज तो रिटेक्स देते हैं पार्शियल यही करता है पार्शियल का मतलब है ओन प्रॉप्स हिस सम फ द कीज ऑफ दिस तो इसका मतलब यह है कि देखो मैं अगर यहां है अगर मैं कुछ भी लिखता हूं एक्सवर्ड मालो मैं लिखा समझ थिंग एक वर्ल्ड टू अ एलो यह एरर देगा यह बोलेगा कि समथिंग नाम की जो प्रॉप है प्रॉपरिटी समथिंग डॉज नोट एक्जिस्ट ऑन टाइप ठीक लेकिन सुझे क्या ले रहा है पार्शल का मतलब है जो आपने समझना देखा ताइप ए अ टाइप कुछ भी मैंने इसको नाम रख लिया PQR equal to ID colon number and कुछ भी X colon ID colon number name colon string ध्यान से देखना दर इस बात को समझना अब मैंने ए�� बनाया const जिसकी type है PQR अब इसको जब मैं एक object दूंगा कुछ भी, तो यहाँ पे error देगा कि property, id and name are missing, क्योंकि a की data type pq आ रहा है, तो a के अंदर id भी होनी चाहिए, name भी होना चाहिए, चलो, तो id add कर देता है, 10, अब error देगा कि id तो मिल गई, name is still missing, name require, property name is missing, तो चलो, name भी add कर देता है, कॉलन सुरेश उसके बाद मैंने इसमें पास कर दिया कुछ भी नेम एंड एज कॉलन 99 तो यह अर्रव देने लग गया क्या कि भी यह एज तो है ही नहीं इसके अंदर आप दोई की होती हैं आप तीसरी की कहां से एड कर रहे हो अब यह समझो कॉंस्ट बी कॉलन पार्शियल पी क्यों आर पार्शियल पी क्यों आर क्या है पी क्यों आर को पार्शियल में दो तो एक नई डाटा टाइप निकलकर आती है जिस जो कि ऐसे है समझो टाइप पार्शियल इसको पीवा थी मैं इसको बोल देता हूं एबीसी और इसको मैंने कर दिया partial pqr और जब भी मैं अब यह यह type abc use करूंगा तो तुम type abc को ऐसे समझ सकते हो तो this is like ऐसे लिखने के बराबर है यह type abc equal to id question mark कोलन नंबर नेम क्वेश्चन मार्क कोलन इसका क्या मतलब होता था क्वेश्चन मार्क का यह ऑप्शनल है तो ABC और LMN बिलकुल same data type है यह ABC क्या करता है यह partial क्या करता है partial में आपने यह pass कर दिया PQR तो यह PQR के सारी keys के आगे question mark लगा देगा ऐसे जैसे मैंने यहाँ पे manual लगा दिया यह तो बात समझ आई अगर मैंने type ABC करा तो अब उसके अंदर मैंने सिर्फ empty object लेखा तब भी कोई error नहीं आ रहा ID colon 1099 लिखा तब भी कोई एरर नहीं आ रहा नेम नहीं दिया मैंने यहां पर दे दिया एज कोलन 22 तो देखो एरर आ रहा है क्योंकि ABC में या तो ID होगी या नेम इसके अलाबा कुछ नहीं होगा बट ID भी ऑप्शनल है नेम भी ऑप्शनल है पार्शियल का मतलब है पार्शियल तो समझते हो ना पार्ट ओफ दिस कि यह इसका कोई भी हिस्सा हो सकता है कोई भी हिस्से में तो हो सकता है सिर्फ ID हो हो सकता है सिर्फ नाम हो हो सकता है दोनों ही ना हो तो देखो सिर्फ ID भी चलेगी क्योंकि partial of PQR मतलब इसको छोटा हिस्सा PQR में तो ID name दोनों चाहिए ABC क्योंकि PQR का partial है तो उसमें सिर्फ ID भी चल जाएगी या सिर्फ ID भी की जगह सिर्फ name भी चल जाएगा name colon Suresh यहाँ पे नहीं चल सकता सिर्फ name यहाँ पे तोरंट error आ जाएगा कि भाईया ID भी दो error आ गया देखो ID is missing यहाँ पे सिर्फ name भी चल जाएगा और यहाँ पे तो जाए दोनों ही मत दो यह भी तो इसका partial हिस्सा ही है कैसा partial है बिल्कुली कुछ भी नहीं लिया तो partial का मतलब है original के अंदर हर key के आगे question mark लगा देना ऐसे type abc equal to partial pqr लिखो या फिर type abc equal to id question mark number name question mark string तो same बात है partial का मतलब समझ आ गया पार्शल का मतलब समझ आ गया तो मैंने यह यूज किया है यहां पर क्लास का टाइम लेट शुरू करें यहां पर देखो ओडर डिटेल प्रॉप्स को मैंने पार्शल इसलिए किया है क्योंकि इसका मतलब यह है मैप स्टेट टू प्रॉप्स है मैं यह कह रहा हूं कि भाईया इनको तो बल्कि बची हुई props will be जाधा better ना हूँ ये बची हुई props हैं, कौन सी बची हुई? जिस component को हम इस map state to props से connect करने वाले हैं और map dispatch to props से connect करने वाले हैं उस component की कुछ props तो ये दोनों देंगे जैसे ये देगा order and products और map dispatch to props देगा order detail तो ये दोनों इसकी तीन प्रॉप दे रहे हैं लेकिन इसमें एक प्रॉप तो अभी बच गई न ओडर आईडी तो ये ओडर आईडी है बची हुई प्रॉप्स में तो बची हुई प्रॉप्स में बस एक ही है बाकी तीन तो तो बची हुई प्रॉप्स में ये ओडर डिटेल पेज प्रॉप सारी नहीं आएंगे क्योंकि कुछ तो इसमें से यही दे देंगे बची हुई तो partial हुई तो होता है मतलब optional है कुछ और क्योंकि optional हो गई सारी इसलिए मुझे को यहाँ पर exclamatory mark लगाना पड़ा कि यहाँ order id तो पक्का मिलेगी क्योंकि मुझे पता है बाकी सारी तो यह दे रहे हैं order id तो लेनी ही पड़ेगी और यहाँ फिर app.tsx में basically अब देखो यहाँ पर error क्यों आ रहा है क्योंकि जो वहां से मिल गई वो तो मिल गई जो बची हुई मैंने यहां पर ऑडर आईडी दे दी अब क्या होगा यह ऑडर आईडी तो कंपोनेंट यूज करते टाइम दी जा रही है बाकी प्रॉप दे रहा है और मैं प्रॉप यह बची हुई ओडर बची हुई प्रॉप में से ऑडर आईडी निकाल के और उस ऑडर आईडी की हेल्प से रियक्ट स्टेट में से मैप निकाल के और ऑडर आईडी की यूज करके पर्टिकुलर ऑडर ही दे रहा है तो अब जो मेरा कंपोनेंट है उसको सीधा ओडर और प्रोडक्ट्स मिल रहा है तो देखो चीजें अब हमारी चलेंगी लेकिन थोड़ा सा अलग तरीके से देखो मैं ओडर नंबर वन पर क्लिक कर रहा हूं तो यहां पर यह ओडर नंबर वन पर क्लिक किया लेकिन ओडर नंबर वन पर क्लिक किया लेकिन एरज क्यों आ कि अब इस लिए आता है कि मैंने इसको रिस्टार्ट कर दिया था वह बंदी बंद हो गया था एक्चुली अ आप देखते हैं देख मैंने ओडर नंबर वन पर क्लिक किया यूआरल चेंज हो गया डिटेल ओडर नंबर टू की दिख रही है मैंने ओडर नंबर थ्री पर क्लिक किया यूआरल चेंज हो गया डिटेल अभी भी ओडर नंबर टू की दिख रही है ऐसा क्यों हो रहा है ओडर नंबर टू का कितना प्राइस है 3023 मैं किसी भी ओडर पर क्लिक कर लूँ टोटल प्राइस 3023 इस ओडर नंबर टू ऐसा इसलिए हो रहा है क्योंकि हमने यहाँ पे order id hard code कर दी है अब हम URL से नहीं उठा रहे है यह तो गर्बड है हमको URL से उठानी है ध्यान से समझना लेकिन component खुद ना उठाए component reusable रहे फिर कहां से उठेगी है अगली class में हम यह करेंगे कि यह जो है इसको एक और HOC में डालेंगे, connect, connect के बाद with router, एक react router की बनाएंगे, यह with router क्या करेगा, connect का जो output है, समझना, original component को चाहिए थी 4 prop, उसमें से connect ने दे दी 3 prop, तो connect ने, पहला था order, detail page was the original, right, इसको हमने connect में से गुजारा, तो let's call that order detail page connected एक नया component बना ये कितनी prop लेता था?

चार ये कितनी prop मांगता है? सिर्फ एक तीन तो ये अपने आप अंदर से arrangement कर लेता है ये dump था बिल्कुल ये सब कुछ मांगता था ये क्या कह रहा है? मुझे बस order id दे दो यहां थोड़ा सा यहां इस के ऊपर further चीजे add हुई है map state to prop, map dispatch to prop तब ये बना है ये 4 prop मांगता था ये एक मांगता है सिर्फ हम इसको फिर गुजारेंगे with router तो ये further एक नया component बनेगा order detail page connected and that too with router ये नया component नाम दे दो चलो इसको ये connected भी है इसमें connect वाला data भी आ रहा है और router वाला data भी आ रहा है तो ये कितनी prop मांगेगा कि यह कितनी प्रॉप मांगता था एक इस कंपोनेंट को जब मैंने राउटर में से विद राउटर होसी में से गुजार हूंगा तो जो नया कंपोनेंट बनेगा वह कितनी प्रॉप मांगेगा जीरो वह जो एक प्रॉप मिसिंग है ओडर आईडी जो यह मांग रहा है उसका यह अरेंजमेंट खुद कर लेगा यह चार मांगता था चार में से तीन का अरेंजमेंट इसने फूल करा इसने एक की डिमाइंड करी आगे इसने फर्दर उसने इसने एक की डिमाइंड करने भी बंद कर दी यह करें कि एक अरेंजमेंट तो ये एक प्रॉप का अरेंजमेंट करेगा और वो प्रॉप इसको पास कर देगा ये तीन प्रॉप का अरेंजमेंट करेगा और एक यहां से आई तो उसके पास चारी खटी हो गई ये चारो इसको दे देगा इसका काम है डिस्प्ले करने का ऐसा समझे कमपनी है कमपनी में ये सीनियर ने चार में से तीन दे दी ये तो सारी इंफॉर्मेशन अपने सीनियर से मांगेगा न लेकिन ये senior तीन तो खुद दे सकते हैं एक इसे भी नहीं पता इसने अपने senior को contact किया उस senior से एक prop ली तीन prop इसने खुद से arrange करी और चारो prop इसे दे दी काम सारा इसने किया चीज़े हमने break down कर ले तो यह with router HOC हम अगली class में बनाएंगे जब तक with router HOC नहीं बनता तब तक तो हम जो component export करेंगे वो connect वाला नहीं with router वाला और जब with router वाला करेंगे तो वो order id भी मांगनी बन कर देगा original यूज़ करोगे तो वो 4 prop मांगेगा और connect के उपर भी router लगा तो वो एक भी प्रॉप नहीं मांगेगा तो यहां से order id देनी हम बंद कर देंगे order id with router HOC अपने आप URL में से निकाल के component को देगा लेकिन component को इस बात से मतलब नहीं है कि URL से आ रही है यह कहां से आ रही है तो होगा क्या बलकि अगर जो मैं तुमको भी example दे रहा था न कि हम ऐसा जैसे मैंने तुमको एक example दिया था, कि ऐसा भी हो सकता है कि मैं यहां click करूँ तो यहीं कहीं expand हो जाए, लेकिन अगर मैं full page पे देखना चाता हूँ तो मैं कहीं आगे click करूँ तो नया URL खुल जाए, तो order detail जो है वो इसी page पे भी दिख रही है और नई URL पे भी दिख रही है, तो दो जगह पे order detail component तो use हो रहे है, इस पेज पे भी order detail component display होता है और नए URL पे भी order detail component display होता है बट फरक क्या है नए वाले पे वो URL में से data निकाल के दिखाएगा यहाँ पे यहीं से दिखाएगा तो actually होगा क्या ऐसे समझना export default मैं इसको export default ना करके export const named कर लूगा ध्यान से सुनना order detail page connected और फिर इसी को फर्दर एक बार और कर लूंगा const page connected with router विद राउटर इसे तो connected है और connected वाले को एक बार और एक HOC में से गुजार दिया तो एक नया component आ गया अब जहां पे मैं URL based दिखाना चाहता हूँ, वहाँ मैं यह यूज करूँगा, यह कुछ नहीं मांगेगा, यह URL में से उठा के ID दिखा देगा, order detail page, but जहां मुझे same page पे expandable दिखाना है, वहाँ पे मैं यह वाला component दिखाऊँगा, बढ़ चाहिए component दिखाऊँ, चाहिए component दिखाऊँ, actually मैं दिखा तो तुम same component रहे हो, order detail page, बात समझ आई, यह एक prop मांगेगा, तो इस वाले page पे तो मैं, यहाँ पे हम, क्लिक करने पर expand कर रहे हैं वहाँ पर तो ID हम अपने हिसाब से देना चाहते हैं URL में तो ID है ही नहीं वहाँ पर मैं यह वाला use कर लूँगा और अगले page पे हमारी same app के अंदर कहीं दूसरी जगा भी हमको order detail page दिखाना है तो this is how HOC is basically work कि आपना जैसी ज़रूरत उसे हिसाब से चीज़े assemble करो use कर लो कि यह रियूजेबिलिटी फिजिकल वर्ल्ड में मुश्किल है कोडिंग में हो जाती आराम से कोडिंग में ना फिजिकल वर्ल्ड के कंस्टेंट अब ऑरिजिनल वर्ल्ड में अगर मैं वहीं कह रहा हूं अगर ऐसे मोबाइल बन जाते हैं कि आज मैं घर जा रहा हूं तो मैं घर में मालो मेरा छोटा भाई है वह उसने उसके फोन में अच्छा कैमरा है तो मैंने कैमरा लगा लिया बगी बड़ी स्क्रीन तो मेरे फोन में थी तो मेरा अजय को जो रोज का काम है कि बड़ी स्क्रीन पर गेम खेलता हूं वह भी चल रहा है और साथ में अच्छे सुप मोडूलर होते फोन तो बड़ा अच्छा होता कुछ भी किसी से मांग दो भाई आज के लिए अपने फोन का एप्पल का लोगों दे जरा जरा जा रहा है मतलब समझ रहा हूं कि सब्सक्राइब लेकिन नहीं हो सकता फिजिकल वर्ल्ड में यहां ह यह component लो, इसको इस वाली map state to prop के साथ जोड़ के एक नई चीज बन गई, इसी component को कोई दूसरा map state to prop के साथ जोड़ के कुछ और बन गया, और फिर जो यहां से बना था, उसमें router और लगा दिया, तो कुछ और बन गया, अब आप यह भी use कर सकते हो, यह भी use कर सकते हो, भाव अभी तो भी यह ओडर आइडिट हुई दिखेगा सब चले अ कि लेकिन कंपोनेंट हमारा बिल्कुल डंब हो गया बिल्कुल डंब उसको नहीं पता यह ऑडर आईडी यूआरल में से आ रही है कहां से आ रही है उसको दी उसने चुपचाप दिखा दी उसको नहीं पता यह ऑडर कहां से आ रहा है रिडक्स इस फंक्शन के क्लिक करने पर क्या होता है एक्शन डिस्पैच होता है कुछ और होता है इसको पता है जब ऑडर डिटेल लोड हो जाएं तो मुझे को चुपचाप ऑडर डिटेल लोड नाम का प्रॉप है वह कॉल कर देना है कॉम्पोनेंट को नहीं पता कुछ दो कितना डंब है उसका काम है ओडर की डिटेल लोड कराई और जब लोड हो गई तो कॉल कर दिया बस इन फैक्ट मैंने बताया ये भी हम सागा में मूव कर देंगे तो ये फरदा डंब हो जाएगा तुम चीजों को स्प्लिट कर रहे हैं अब होमवर्क समझ लो तुमको एक नया प्रोजेक्ट बनाना है उस नए प्रोजेक्ट एक वीडियो में अपलोड कर दूंगा पैट फाइंडर करके है तो उसके लिए उपराने लेक्चर की वीडियो है पैट फाइंडर डमी एपियाए उसमें वैसे डिस्क्राइब होगी वो यही था क्या वो पैट फाइंडर यह इसी पर साइन अप करना है पैट फाइंडर और इसकी एपीआई तो कंवाइट मिल जाएगा साइन अप विद गूगल यह सिर्फ यूएस के लिए है तो अपना एड्रेस यूएस का डाल देना कोई इंटरनेट से उठाकर आई होप यह नोट डूइंग सुम्थिंग रॉंग एक बार मुझे आउट चलो एनीवेज और डूइट आप एक यूर ऑन रिस ऐसे कुछ गलत नहीं कर रहे हैं हम लेकिन अब यूएस का एड्रेस डाल रहे हैं इंडिया में तुम इस पर साइन अप कर लोगे तुमको एपीआई की मिल जाएगी तुम इसको टेस्ट कर सकते हो इसकी हेल्प से एक छोटी सी आप बनानी है वह मैं एक लेक्चर अपलोड कर दूंगा पिछले बैच का थोड़ा से यह जो पिछले कुछ लेक्शन पिछले अपलोड मैंने तुमको सागा के lecture upload कर दिये थे लेकिन उसमें तुमको map state to pro भी नहीं पढ़ा था तुमने अब पर और अब जो मैं assignment upload करूँगा उस assignment में वहाँ पे हमने create selector वगैरा शायद नहीं पढ़ रखा है उस पिछले batch में जब यह pathfinder बनाया तो तुमको pathfinder app बनानी है पहले वो video देखो फिर जो assignment उसमें बनाया है सेम तुमको बनाना है बट तुमको अगर कुछ चीजें एक्स्ट्रा पता है कि मुझे तो क्रिएट सेलेक्टर पता है यह तो क्रिएट सेलेक्टर यूजी तो यह असाइनमेंट आप वहां कुछ पूछना किसी को तो बताओ अ कुछ डाउट्स है तो मैं भी एक तो यह कि इंटरव्यूज कब से शुरू होंगे इंटरव्यूज अभी करेंगे जल्दी ही शुरू आप तो दो हफ्ते में थोड़ा सा यह सागा के बाद ही करेंगे तब यह पूरा रिडक्स वाला तुम्हारा क्लियर हो जाएगा इंटरव्यूज में पूछा जाएगा कुछ और सवाल है किसी का दिपक सर अपने वाली एपिस वह फर्स्ट बैच में आपने यूज करी थी वही है वही है नही कि प्रॉब्लम शरूरति दस या पंधर मिनट बाद साइन अप मांगने से दुबारा से अच्छा वासर वाली एपएड दस या पंधर मिनट बाद दुबारे से साइन अप मांग दे सर दुबारा साइन अप नया अकाउंट बनाओ आशर बनाने के बाद फिर से टोकन एक्सपार हो जा रहा है दस या पंधर कि नए आकाउंट बनाना पड़ रहा होगा बस टोकन ने जनरेट करना पड़ रहा है ना हां सर आप तो ठीक है तुमको मतलब जब हम टेस्ट करेंगे तो हम उसमें अपना टोकन डाल कर टेस्ट कर लेंगे 10-15 मिनट मदद एक बड़ जाओ टोकन पड़ रहा है दोबारा से यूज करने शुरू कर दो कोई बात नहीं अब वह मतलब हो तो जा कि दिव्यांशु पिछले जो आपने लेक्शन डाले वाले सागावाल उसमें वाला वाला यह देखो वह समझाने के लिए तो अब थोड़ा सा ओलरेडी आठ 25 हो चुके हैं तो मैं अपने लाइक लगेगा तो यह थोड़ा नहीं नहीं जब हम नेक्स्ट करेंगे तो जिस बेसिकली तो लुट दो बारा से फिर पूरा जनरेटर बताई दूंगा ओके सर ठीक है वह नहीं भी समझ आ रहा तो देखो दोबारा से जो मैं वहां पर कह रहा हूं एक बार वह रिकॉर्डिंग पार्ट और ना फिर मैं जनरेटर एक बार दुबारा बता देता हूं अगर ऐसी रिक्का रहा और हां यह मैं सब के लिए कह रहा हूं वह वीडियोस में क्या है क्या नहीं है मुझे भी नहीं पता क्योंकि मैं इतने टाइम पहले पढ़ाया था अब उसमें पढ़ाया नहीं तो कोई भी ऐसा कंसेप्ट कोई map state to prop के अलावा ऐसा concept जो use कर रखे है बट नहीं पढ़ रखा हमने anyone कुछ और तो नहीं है ना so I'm assuming कि कोई और नहीं है क्योंकि कोई answer नहीं है ideally तो मुझको यह करना चाहिए कि यह lecture उन दोनों lecture से पहले डाल देना चाहिए लेकिन confusing हो जाएगा अब ना वालों से पहले मैं यह लेक्शन इंसर्ट कर दो उनका नंबर आगे बढ़ा दूं YouTube पर लेकिन इंच इंच नहीं हो जाए थे इस विल बिकंग फॉर्ट लेक्शन नंबर एक सिर्फ देखो जरा यह कर लूंगा मैं YouTube पर और योगी अ पर नियुक्त पर नियुक्त प्रदक्स आगा इस लेक्शन को 51 बना दूंगा इसको 52 53 आफ इन चला देख दो यह अब यह विशेष वाला भी है उसमें पॉइंट पॉइंट अब तो अगली क्लास में तुमको पढ़ाता हूं और उन दोनों लेक्शर को आगे खिसका दूंगा तो मैं आज इसको अपलोड करूंगा एज लेक्चर नंबर वोट 49 और वह 50 और 51 हो जाएंगे ठीक है तो कंफ्यूस मत वना वह सिर्फ इसलिए है तुम तुमको बट कोई नया बंदा है यूट्यूब पर तो जर्नी में दिखकर नहीं आएगी अगली क्लास में हम ऐसे इंटरवेट पढ़ते हैं और अगर नहीं पूछना तो अगेन है पिछली यह एंड थैंक्स फॉर ऑल द पेशेंट्स मैं कि थोड़ा सा चीजों में बिजी होने के वजह से इस बार पुरा सा मजाग सा हो गया क्लासेस के साथ बट तुम लोग काफी पेशेंस दिखा रहे हो और अच्छे से पढ़ रहे हो तो थैंक यू फॉर देट मिलते हैं शायद वेडिनेस टेको फॉर फॉली ठीक है ओके बाइट