हेलो व्हाट्सआप गाइस मैंने इस पिनोट पाग थापा एंड टोड़ें इस वीडियो वह विल सी रियक्ट रिडक्स कंप्लीट टूटोरियल इन वन वीडियो इन हिंदी तो चलिए गाइस सुरू करते हैं सबसे बहले गाइस आप से बहुत बहुत स्वागत करना चाहूँगा मेरे औस्सन चैनल थापा टेक्निकल पे और आज हम फाइनली रिडक्स कंप्लीट देखेंगे सिर्फ एक वीडियो में ठीक है और आप अपने अपने अपने अ जब इस बटन पर क्लिक करूँगा, आप देख सकते हैं, मैं इसको 5 से इंक्रीमेंट करवा रहा हूँ, 15, 20, 25 आएगा. और जब मैं इस पर minus करता हूँ, जब मुझे इसको decrement करना है, तब मैं उसको 1 से decrement करवा रहा हूँ. तो आप बहुत सामाल होगे, मतलब react-hooks में मैं आपको already use state hooks की मदद से आपको दिखाया हूँ.
तो अभी तक अगर आपने नहीं चेक आउट किया था, तो जरूर चेक आउट करेंगे. तो मैंने react hooks की मदद से आपको यह state management यह बनाकर दिखाया था basically increment, decrement, counter आपको दिखाया था कि आप कैसे कर सकते हो लेकिन आज हम समझेंगे what is redux and redux की मदद से आप इसको कैसे create कर सकते हो वो मैं आपको बताना लाओ and at the end अगर आप इस वीडियो को end देखते हो guys आप बोलेगे OMG इतना जाता simple था redux क्योंकि guys हम बहुत कुछ देखने वाले बहुत कुछ नहीं basically सब कुछ देखेंगे redux में जो एकदम important है तो गाइस अब हम बिना किसी देरी के वीडियो को स्टार्ट करते हैं लेकिन उससे पहले बताना चाहूँगा अभी तक अगर आपने मेरे चैनल थापा टेक्निकल को सब्सक्राइब नहीं कर दो गाइस प्लीज सब्सक्राइब कर लीजिएगा राइट साइड में क्रेड कलर का बैल आइकिन एक घंटी दिखाई देगा हिट कीजिए क्लिक कीजिए ताकि आप डेली ऐसे ऑस्टम वीडियोस को मिस्स ना करें एंड गाइस यह भी बताना चाहूँगा कि अभी तक अगर आपने मुझे इंस्टाग्राम बिनो थापा 55 पर समझाना चाहूँगा what exactly react redux is ठीक है basically सिब redux बोलेंगे तो भी चल जाएगा तो welcome to redux tutorial PPT बहुत awesome है guys मैंने बहुत मेहनत करके PPT बनाई है ताकि आप लोगों को एक एक part एक एक portion समझा सकूँ ठीक है तो सबसे पहले redux को सिखने से पहले ये हमें जानना बहुत ज़रूरी why redux किसले redux ठीक है तो guys एक simple question है देखो redux काम आता है आपके state management के लिए ये काम आता है आपके state को manage करने के लिए ठीक है and we all know what is state now देखो एक normal अगर हम react use करते है and हमें अगर कोई data को pass करना रहा ठीक है तो हम कैसे करते देखो but इसमें एक catch है catch वो है कि हमारा जो data है वो एकदम bottom वाला component है उसके पास है ठीक है data मेरा किदर है एकदम bottom वाला component देखो हमारा app.js we all know तो यह वाला जो last component है ठीक है इसके पास मेरा यह data है है तो गैसाब मुझे आप बताओ कि यह जो कंपोनेंट है ठीक है इसके पास जो डाटा है अगर वह डाटा कल की दिन मुझे इसको एंड इसको पास करना रहा तो मैं कैसे करूंगा हम नहीं कर सकते पता क्यों क्योंकि देखो गाइस यूनिट डायरेक्शनल मतलब पैरेंट से यूनो हम चाइल्ड तक डेटा बेज सकते हैं लेकिन हम कभी चाइल्ड से वापस उपर की ओर हम डेटा को पास नहीं कर सकते सो ये एक प्रॉब्लम है तो इसको रियक्ट वालों ने कैसे सॉल्ब किया देखो रियक्ट वालों ने इसको कैसे सॉल्ब किया मैं आपको बताता जो डेटा हमने पहले इसको पास किया था अब वो डेटा डारेक्टली हमारा जो में रूट है और अब कल के दिन अगर इसको सिर्फ और सिर्फ इस particular वाला जो component है, सिर्फ अगर इसको data चाहिए होगा, तो हम क्या करेंगे, app से पहले इसको data pass कर देंगे, and then इसको जब data मिलेगा, तो इसके थूँ मैं इसको pass कर दूँगा, and इसके थूँ guys मैं यहाँ पे data get कर सकूंगा, कि एक component को data pass करने के लिए, तो यह जो problem है, इसको हम बोलते prop, ड्रिलिंग क्योंकि हम प्रॉप्स पास करते जा रहे प्रॉब्लम यह प्रॉब्लम है तो अब इसको कैसे सॉल्व करें यह सॉल्व हुआ आपके रियक्ट होक्स में ठीक है जहां पर क्या किया कि डेटा हमारा एप के पास ही रहेगा लेकिन कल के अगर एप के अंडर वह यूजर ठीक है एंड एंड सब्सक्राइब और यूजर इनफो तो अगर यूजर इनफो को डेटा लेकिन अब with the help of context API and then use context ठीक है उसमें क्या होता है we have a provider and then we have a consumer so provider के अंदर हम इसको wrap कर देते थे and consumer के पास एक power है चाहे app के अंदर कितने भी component क्यों ना हो तो उनमें जिन जिन component को भी ये data चीए तो वो as a consumer का role play करेंगे and वो उस data को get कर सकते थे ठीक है तो ये भी कोई problem नहीं guys ये मुझे अच्छा ही लगा सच बोलू तो मैंने जब react hooks में मैंने already skipper video upload किया मुझे ये सही लगा लेकिन consumer थोड़ा सा lengthy था तो उसके लिए हम use करते है use context तो instead of consumer nowadays we use the use context and बहुत easily provider and then use context की मदल से हम data को get कर सकते थे और अब यह आपके ऊपर है कि आप react hooks या redux यूज़ करेंगे क्योंकि redux भी यही करने वाला है अब थोड़ी देर में मैं आपको बात आता हूँ लेकिन इसको दिखाने से पहले मैं आप लोगों को एक चीज़ दिखाना चाहूँगा आप देख सकते हो context API and then prop drilling उसको हम overcome कैसे कर सकते हैं with the help of context API use context hooks in react in 2021 and साथ इस साथ use रिड्यूसर हुआ वाले वीडियो को भी जरूर चेक आउट कीजिए तब आप बहुत क्लियरली पता लगा पाओगे कि हां वहीं में रियक्ट हुक्स यूज करूं या डिडक्स का यूज करूं स्टेट मैनेजमेंट के लिए ठीक है तो बस इतना ही है तो गाइस अब यहां पर जो वह डेटा है उसको हम एक सपरेट स्टोर में ऐड करके रख देंगे एंड इस स्टोर की मदद से इस पर जो भी component हो उनको जब भी data लगेगा वो इस store को call करेंगे और वहाँ से वो data get कर सकेंगे तो अब इसको data ची तो guys आप देख सकते हो यहाँ पे link की इसको call करेगा इस store को data मिल जाएगा इस वाले component को data ची तो directly store को call करेगा data मिल जाएगा इस वाले को guys data ची तो यह directly store को call करेगा इसको यहाँ से data मिल जाएगा तो redux में we have a one centralized you know separate store होता है जिसमें हम अपना complete हमारा application का state store करके रखते है and जिस भी component को चाहिए होगा data तो वो store को call करेगा and उसको call करने के एक different तरीका है जो अभी है मैं आपको बताऊंगा redux में तो guys redux का main funda यही है ठीक है एक centralized अलग सा ही एक store जहाँ पे हमारे application के सारे state इसी के अंदर होंगे ठीक है and जब भी किसी भी component को वो data चाहिए रहेगा वो simply इसको call करेगा वहाँ से data get कर लेगा ठीक है अब वो data को call करना store को create करना किस तरीके से data store हो रहा है कि कॉल किस तरीके से रहा है स्टेट को अपडेट कैसे हो रहा वह तो अब हम तो इसमें देखेंगे लेकिन आपको आईडिया पता चली गई होगा कि क्या प्रॉब्लम था एंड रिडक्स ने इसको किस तरीके से सॉल्व किया है सिंपल pattern and a library for managing and updating application state. मैंने थोई देर पहले आपको बता दिया application state को manage करने के लिए. Using events called action. अभी आपको पता चल जाएगा.
It's served as a centralized store. थोई देर पहले guys मैंने आपको दिखाया था एक centralized store होता है. For a state that needs to be used across your entire application with rules ensuring that the state can only be updated in a predictable fashion.
Redux आपका main काम करता है state को manage करने के लिए and उस state को manage करने के लिए we have one centralized store जिसके अंदर आपके application का सारा state उसी में ही store रहता है उसी में ही add रहता है and जब भी आपके application के अंदर किसी भी component को या किसी भी file को अगर data चाहिए रहेगा तो वो वहाँ से data get कर सकता है वहाँ के data को update कर सकता है basically state को and वो जब भी update करेगा वो होगा in a predictable fashion predictable मतलब हमें बहुत clear cut पता यह रहेगा कि किस component ने किस तरीके से call किया and उसका जो previous data था and then जो updated data है वो सब कुछ किस तरीके से हुआ तो guys यह अब हमें फायदा करेगा जब हम बाद में testing करेंगे क्योंकि हमें सब कुछ मालूम है क्योंकि guys हमें सब कुछ idea है कि किस component ने उसको call किया था तो यह होता है आपका redux state management के लिए अब हम देखते हैं कि redux में कुछ main topics है तो सबसे पहले we have a action जो बोलता है what to do क्या करना है action वो टू टीक है एंड अगर मैं आपको बताऊं हमारा जो केस है हमारे इस केस में हमें क्या करना है दो ही एक्शन है एक तो इंटरनेट करना है दूसरा डिक्रिमेंट करना तो वह एक्शन हमें बताएगा ठीक है उसके बाद वह रिड्यूसर पाल में ऑलरेडी रिड्यूसर कंटेंट स्टेट एंड एक्शन जो यह बोलता है कि किस तरीके से करना है जब मैं प्लस पर क्लिक कर रहा हूं तो वह पांच नंबर को इंक्रिमेंट कैसे कर रहा है उसका सारा फंक्शनलिटी रिडूसर के अंदर आएगा ठीक है एंड विए बेस्टोर जो मैंने आपको बता है विए वन सेंटरलाइज स्टोर उसके अंदर हमारे सारे डेटा स्टोर रहेंगे ऑब्जेक्ट बेसिकल एक ऑब्जेक्ट है यह भी विच होल्ड्स दिस्टेट ऑफ दी एप्लीकेशन ठीक है सिंपल एंड लास्ट इस स् लाइक वी है बटक्रीट स्टोर स्टोर को कैसे क्रिएट करें एक्शन को हम कैसे ट्रिगर करें कि मुझे इंक्रीमेंट करवाना है कि डिक्रीमेंट करवाना उसके लिए डिस्पैच उसका थे एंड देट स्टेट टू गेट दिकारेंट स्टेट ठीक है जैन देन वह एक्स का बेसिक इतना है आपको इतना समझना देखो मैंने आपको बता देव है एक्शन रिडूसर एंड देन लेट्स एजुम कि आप जो गन्ने का जूस जो निकालता है या जो फ्रूट्स के जूस निकालते हैं आप उनके लिए एप्लिकेशन करना चाहते हो तो वहाँ पे अगर हम Redux Basic को समझे तो वहाँ पे action क्या है action आपका ये handle होगा ये जो handle bar आपको दिख रहा है ये आपका action है क और फिर रिडूसर के अंदर क्या होता है गाइस आपको किस तरीके से हमें करना है अगर आपको फ्रूट का जूस यह मेरा एप्पल है तो एप्पल इसके अंदर आप एड करो और इसको रोटेट करो तो वह रिडूसर आपका बताएगा कैसे करना है और फिर जब हमारा जब यह वर्क हो जाएगा तो अब जूस मिलने वाला हमें तो वह हमारा अब अपडेटेट स्टेट कहलाएगा तो यह आपका एक्सन है कि क्या करना है वाट टू डू हमें इसको रोटेट करना है रिडूसर होट टू डू उसको किस तरीके से करना है एंड एंड स्टेट आपका करेंट स्टेट आपका अपडेटेड स्टेट वह सबको मेंटेन रखता है एंड यह जो आपका रिडूसर एंड स्टेट यह गाइस आपकी स्टोर के अंदर आते हैं इस टोर उसको मेंटेन वह एक विल्ड का प्रतिप्रता है। एक्शन आपका एक प्लेन जवागस्क्रिप्ट का विल्ड है, जिसमें एक विल्ड है, जिसका नाम होगा एक्शन प्रतिप्रता है। एक्शन आपको बताना चाहिए क्या करना है, यह एक एक्शन है। अगर मुझे यह प्लस बटन पर क्लिक करना है, तो मुझे पहले बताना पड़ेगा मेरे इस एप्लीकेशन को कि हमें एक एक्शन है, जिसका क्रिमेंट है। इंक्रीमेंट इस तरीके से बता देते हैं यह पेलोड आपको पता चल जाएगा जब हम एक्सेंपल देखेंगे अब गाइस मुझे आप बताओ कि हमारा यह जो एप्लीकेशन में टोटल कितने एक्शन होने चाहिए क्योंकि गाइस मैंने आपको बताओ कि टोटल कितने है हमारे इस एप्लीकेशन में और गैस आपने समझ लिया वन इस इंक्रीमेंट अनुवार वन इस डिक्रीमेंट यह जो फिटीवान फिटीटू यह कोई एक्शन नहीं है तो हमारे टोटली प्लस या माइनस पर क्लिक करने के ऊपर डिपेंड है तो अब नेक्स्ट स्लाइड में यही है कि क्या होता है यह टोटल कितने एक्शन से तो सिंपली इंक्रीमेंट जब भी यूजर क्लिक करेगा इंक्रीमेंट बटन पर एंड वि है वर्ड इक्रीमेंट जब भी यूजर क्लिक करेगा डिक्रीमेंट ठीक है जो कि एक प्यूर फंक्शन है विच क्रिएट्स एन एक्शन सिंपल नौ इस तरीके से हम एक्शन क्रिएट करते थे पहले मैं आपको जो दिखा रहा था वह कुछ इतना था सिर्फ रिटर्न टाइप एंड पेलोड लेकिन यह अब आपका एक है मैं आई एंसी नंबर यह फंक्शन को कॉल करूंगा एंड मुझे पता चल जाएगा कि इस फंक्शन को कॉल करने से तो यह होता है आपका action creator जो कि reusable है आपका portable है and then easy to test है ठीक है क्योंकि सब तो maintainable है you know हमें मालूमे predictable भी है so second आ जाता है आपका reducer मैंने थोड़ी दिर पहले action के मदद से बाता दिया कि increment and decrement दो action हमें perform करने है but इस तरीके से करना है वो आपका reducer help करता है वहाँ पे तो what is a reducer देखो reducer आ function that takes current state and then an action एज आर्गुमेंट एंड रिटर्न अन्यू स्टेट वह मिनट एग्जांपल आपको याद तो यह पहले दिखाया था वह इमेज वह नो रॉ एप्पल को आप डालते हो एंड आप उसको रोटेट करके अंदर जो भी मेकनिजम होगा उसको पीस के जूस निकाल देगा तो यह आपका दूसरा argument पहला argument हमेशा आपका initial state या current state रहता है दूसरा आपका action as an argument and then उसके अंदर हमें उसको perform कैसे करना है किसी ने अगर increment पर click किया तो हमें उसको किस तरीके से perform करना होगा कि state change हो जाए basically एक से increment हो जाए या जितना भी हम चाते basically मैं 5 से चाता हूँ that's why we have action.payload आपको पता चल जाएगा and then finally अगर कुछ है ही नहीं तो यह normal जो initial state है जो current state है उसको ही return कर दो और नहीं भूलें ज़िन्ने कोड के मदद से यह सब कुछ देखने के लिए हैं। लेकिन मैंने एक बार आपको पहले में बेसिक आईडिया दे दू कैसे हो रहा है। तो बहुत ज्यादा सिंपल है। देखो। अब रिडक्स टो ब्रिंग्स टोगेदर स्टेट एक्सेंस एंड देन रिडूसर डेट मेक यूर एप तो इन्हीं सभी के मदद से आपका एक एप बनता मैंने आलरेडी आपको बता दिया वाट स्टेट एक्सेंस डिडूसर इमेज की मदद से वन बाइ वन एक्सप्लेन करके अब सिंगल स्टोर इन रिडक्स एप्लीकेशन एंड सिंगल स्टोर में आपको दिखाया था डेटिज योर सेंट्रलाइज्ड याद है आपको वह सिंगल स्टोर से ही जो भी कंपनेंट को डेटा चे वह उनको कॉल कर देगा एक्सेंट बेसिकले डिस्पैच कॉल करेगा ठीक है अब ऐसे बहुत ही ज्यादा इंपोर्टेंट है डाइटिस कि एब्रीड रिडक्स का जो स्टोर है विल हैब ओनली वान सिंगल हो गया है तो इस इसलिए इतना ही था डिडक्स आई हॉप आपको पता चल गया होगा ठीक है यह तो बेसिक हमारी जो थिवरी तो वह पार्ट कंप्लेट होने वाली है अब हम देखेंगे हमारा प्रैक्टिकल लेकिन उससे पहले कुछ प्रिंसिपल्स हमारे तो हमारा एक सेंट्रलाइज डेट वहीं से ही हमें डेटा को गेट करना है सब कुछ करना है एंड देन स्टेट इज रिड ऑनली द ऑनली वेट टू चेंज दिस्टेड इस टू इस एक्शन एंड व्हाट्सएप आपको पता चल जाएगा कि वह आपके एक्शन को ट्रिगर कर रहा था ठीक है एंड जब हम देखते स्टर्ड वन तो डेट इज इम्मीटिबिलिटी इट मिन्स म्यूटिबल मतलब जो डाटा चेंज हो रहा है इम्मीटिबल मतलब डाटा हमें बहुत क्लियर कट पता चलेगा कि हमारे एप में कोई कुछ मिस्सीव नहीं कर रहा है एंड कोड हम बहुत मेंटेन रख सकते उस तरीके से वान वेडिटा फ्लॉमिन आप ऑलरेडी आपको बता दिया कि किस तरह के से डाटा फ्लॉम होता है एंड प्रेडिक्टिबिलिटी आप ऑप्टम ऑब्यॉसली आप विविवर आप में सब कुछ मालूम चली रहे हैं कि कैसे काम हो रहा है किस तरीके से हो रहा है डेट्स वा य अगर आप से आगुमेंट पास करते हो तो ठीक है तो गैस इतना ही है आपका रिडक्स एंड इस इजिट अब हम बिना किसी देरी के गाइस अपने वीडियो स्टार्ट करते ठीक है तो गैस आप देख सकते हैं कि मैं अपने विशेष कोड एडिटर पर आ चुका है तो देखिए और जून कर देता था ध्यान से देखो अब मुझे रियाट रिडक्स इसके अंदर एंटर करना है ठीक है तो रियाट रिडक्स ऑलएट पॉफेक्ट अब मुझे इसके अंदर पहला अपना यह जो एप्लीकेशन है यह किसके थ्रू बन रहे रियाट की विडियो राइट तो मुझे पहले रियाट एप्लीकेशन क्रिएट करने तो किस तरह से गए इस एंटर एक्स क्रिएट रियाट और आप देख सकते हैं साथ 30 सेकंड भी नहीं लगाऊंगा विकॉज मैंने पीसी को अपग्रेट किया हुआ है यू नो डेट्स वाइट तो एट लिस्ट चलो यह मेरा काम हो गया अभी मुझे क्या करना है सीडी एंड रिडक्स एप पर चलना है अब मैं सिंपली यान एंड तो अब मुझे अपने मेन फोल्डर के अंदर चलना है यहां पर सोर्स के अंदर मुझे चलना है सबसे पहले तो यह जो लोगो है लोगो को मारो गोली ठीक है एप डॉट जस्ट में ऑबिएसली लोग होगा तो उसको वहां से मैं कर देता हूं एक काम करता हूं इसको तो मैं कंप्लीटली डिलीट कर देता हूं यह टेलो फंक्शन कंपोनेंट विट एक्सपोर्ट ऑशंब इसके ऊपर मैंने ऑलरेडी वीडियो क्रिएट किया हुआ ठीक है तो आपको बिल्कुल टेंसन लेना इस इस यहां से आटा देता हूं मैं यहां पर एक वन वेलकम में लिख देते से वेलकम टू डिडक्स ठीक है ऑलरेट स्पेलिंग रॉन हो गया इट डॉजन मैटर अगर यह मुझे आप पूटा प्रोफेशन आप देख सकते हो कि बेसिकली मेरा जो एप डॉट से ऐसे है ठीक है उसका कोड मैंने यहां पर कॉपी एंड पेस्ट कर लिया है ताकि मुझे थोड़ा यह अच्छा दिखाई देवा गया इतना कुछ है नहीं फिलाल वह अभी दिखेगा है क्योंकि मुझे एप डॉट से इसको यहां पर इंपोर्ट करना पड़ेगा सो इंपोर्ट ठीक है डायरेक्टल यहां पर है तो मुझे रिडक्स को इंस्टॉल करना पड़ेगा तो मैं वापस यहां पर चलता हूं इसको हटाता हूं कंट्रोल से करके मैंने इसको बेसिकली टर्मिनेट किया अभी देखो गाइस इट्स पर डूपर इजी है आपको क्या लेकिन एंट प्यार इंस्टॉल रिडक्स क्योंकि हमें रिडक्स यूज करना है एंड रिएक्ट के साथ उसको कनेक्ट भी करना है तो रिएक्ट रिडक्स आपको है वह हमें लगती है अगर आप आपको नहीं आईडिया क्या था यह रिडक्स के ऊपर मैंने जो आपको एक्सप्लेंट किया डेट इस मोर दैन इन अफ फिर आपको और रिडक्स यूज करोगे रिडक्स में क्या है आपका एक्शन ठीक है तो मैं क्या चलता हूं सोर्स पर आ राइट क्लिक एक न्यू फोल्डर क्रिएट करता हूं जिसका नाम होगा एक्सेंस एक्सेंस कितने भी हो सकते कि वाट टू डू क्या-क्या होने वाला है ठीक है अब इसके अंदर चलकर मैं क्या करता हूं न्यू फाइल क्रिएट करता हूं जिसका नाम होगा इंडेक्स टॉ� प्लेटीपल रिड्यूसर्स क्रिएट कर सकते हो ठीक है तो गाइस में यहां पर लिख देता हूं सिंपली आप डाउन ऐसे कुछ नहीं आप कुछ भी लिख सकते हो तो आई डोन नो मैं कि आप डाउन लिख रहा बेसिकली क्योंकि मुझे कम एंड ज्यादा करना इसका नाम होगा इंडेक्स डॉट जेस दिस इट तो एक बार आपका एक्शन एंड रिडिसर्ट क्रिएट हो जाता है तो वी नीड आवर स्टोर ठीक है है तो सोर्स पर मैं चलता हूं एक न्यू फाइल क्रेट करता हूं जिसका नाम होगा एक सेकेंड आई थिंग पॉफेक्ट चलो स्टोर डॉट जस दिस इज एक्शन रिड्यूसर एंड आपका स्टोर इस टोर आपको मालूम है स्टोर हमें क्रिएट करना कि सबसे ज्यादा इंपोर्टेंट पैकेस डॉट जैसेन फाइल पर जाकर एक बाद चेक कर लो कोई सब कुछ पॉफेक्ट है नहीं रियाट रिडक्स रियाट डॉट पॉफेक्ट वह सॉरी यहां पर रियाट है रियाट रिडक्स है एंड यहां पर वह अब और डिटेक्स एंड रियाट रिडक्स रिडक्स रिडक्स तो आप यह जो मेरे जो भी वर्जन आपको दिखाई दे रहा है इसको जरूर चेक आउट कर लीजिएगा ठीक है मतलब जो मेरा वर्जन है वही सेम वर्जन आप कॉपी एंड पेस्ट या इंस्टॉल कर लीजिएगा तो इसकी भी कोई नीड नहीं है इंडेक्स टॉट जेस की कोई नीड नहीं है इसकी कोई नीड नहीं है इसकी भी कोई नीड नहीं है फिलाल यह जैसे रहेगा तो सबसे पहले मेरा क्या काम रहेगा गाइस सबसे पहला मेरा काम होगा किसी तरीके से मुझे यह जो यू आई ए कि आप देख सकते हैं कि मैंने अपने जो यूआई वाला पार्ट मैंने लिख लिया है एंड मैंने यह ऑटोमेटिक इसलिए डायरेक्टली कॉपी प्रेस्ट किया क्योंकि सिंपल एक एसटेमल है मैंने कंटेनर लिया ठीक है आप देख सकते हैं इसके अंदर चलो पॉफेक्ट खाली यान एंड स्टार्ट मुझे इसको लिख देना है पॉफेक्ट ना वांस यह लिखने मात्र से यह एप्लीकेशन स्टार्ट हो जाएगा अ है और लगाइस आप देख सकते हो कि मेरा एप्लीकेशन स्टार्ट हो चुका है कितना ऑस्टम मुझे दिखाई दे रहा है यह एस्टेमल एंड सीएस का कमाल इसमें कुछ ऐसा हाई फाइड नहीं है ठीक है वह साब यह कह लो कि अगर आप स्कूल भी यूज कर सकते ठीक है अब ध्यान से देखो गाइस क्या रहा है यहां पर सिंपली एक कंटेनर लिया सबको रे� पर यह दोनों के लिए ठीक हो तो स्किन मदद से मैंने इसको इस तरीके से ऐड कर दिया एंड यह जो तीनों पार्ट आपको दिखाई है यह जो इंक्रीमेंट होगा यहां पर नंबर एंड प्लस उसके लिए मैंने एक सेपरेट डिप्ली क्वेंटिटी मेरा एंकर है एंड उसके बाद यह जो नंबर है वह क्यों ऐसा दिखाएं बिकॉज मैंने एक इनपुट टैग लिया हुआ जिसको क्लास जो यह वैल्यू जीरो दिखाई दे रहा है because of this वह आपको वैल्यू जीरो दिख रही है एंड यह प्लस दिखाई दे रहा है because again anchor tag मैंने class use की है quantity underscore plus एंड यहाँ पर plus है एंड this is it बस इतना ही था बाकि कुछ नहीं होगा देखो मैं प्लस करूँ माइनस करूँ कितना भी क्लिक डेट इज व इंक्रीमेंट एंड देन यू व डिक्रीमेंट एंड वह कहां होता है वह हमें करना होगा हमारे एक्शन पर चलना है एक्शन के अंदर वह आप और इंडेक्स टॉट जेस्टिग अब मुझे यहां पर चलकर अपने एप्लीकेशन में जितने एक्शन क्रिएटर के मदद से वह फंक्शन क्रिएट करना है नाम कुछ भी आप लिख सकते इस तरह से विशेष एरो फंक्शन एंड खाली आपको रिटर्न कर देना ठीक है मैं यहां पर चलता हूं एंड एक चीज होना बहुत ज्यादा जरूरी मैंने आपको बताया था डेट इस एक्शन में विनिट्स है बट टाइप फिल्ट याद आपको यादा है ठीक है तो इस तरह से मैं चलता एंक्रीमेंट चलो सिंपल फिल्ट में एजिटिश रखने वाला हूं एंड आपको मालूम है अगर आप रिटर्न टैग यूज नहीं करते हो आई मिन खाली अगर आपका एक है वह एक लाइन का कोड है तो आप डायरेक्ट इस तरह से उसको कर सकते और यहां पर चलता हूं से इसे को कॉपी कर लेता हूं यहां पर पेस्ट कर देता हूं नॉट इंस्ट्रीड ऑफ इंक्रीमेंट आविल गुविद एक सेकंड यह कैप्स ऑन है डेट्स वाइट ठीक है मैं चलता हूं डिक्रीमेंट एंड यहां पर अगेन मैं इनको बाद में यूज कर सकूं ठीक है तो एक्सपोर्ट ठीक है एंड गाइस आई थिंक यह आपको मेबी थोड़ा सा वेड लग रहा होगा है ठीक है तो मैं क्या कर देता हूं इसको एजिटिज हर रख देता हूं जो पहले था यह डेटिज यहां पर में रिटर्न लिख देता हूं ताकि आप लोगों को बिल्कुल भी ऐसा वेड फिल ना हो दिस इजिट सिंपल ठीक है यहां पर भी से मुझे कि अब मुझे क्या करना है अब मुझे चलना है मेरे रिडूसर के पास रिडूसर में क्या होगा कि जब मैंने बता दिया कि इस तरीके से होने वाला है मेरा पहला काम तो मुझे जाना पड़ेगा किसके पास रिडूसर के पास ठीक है अब मुझे रिडूसर में जाकर यह जो एक एक्शन है यह कैसे करना है वह एक्सप्लेन करना है उसका कोड लिखना है एंड है तो रिडूशन पर मैं चलता हूं सिंपली यहां पर ठीक है देखो यहां पर गाइस इट्स पर डूपर इजी ऑलडी मैंने आपको बताता कॉन्स्ट ठीक है चेंज दी नंबर आप उस भी लिख सकते चेंज चलो ठीक है स्पेलिंग ऐमिन कैमल केस तो ऐमिन कैस को फॉलो करो विल विकल्ड आपका यहां पर मैंने बताता का इस टेक टू आर्गुमेंट्स ठीक है वह जो दो आर्गुमेंट हो कि आप में सबको मालूं है एंड एटिज स्टेट एंड अपना एक्शन तो स्टेट कॉमा आपका एक्शन एंड आपका जो डिडक्स बोलता है बेटर गो विद इनिशियल स्टेट इस तरीके का एक वेरिबल क्रिएट कर लीजिए ताकि बाद में प्रॉब्लम ना हो यहां पर चलता हूं अब इसको देखो कॉंस्ट इन मुझे यह जो इनिशियल स्टेट इसको डिफाइन भी तो करना पड़ेगा इनिशियल स्टेट है ठीक है एंड अब मुझे क्या करना है देखो मुझे दो एक्शन को परफॉर्म करने इंक्रीमेंट एंड इक्रीमेंट तो आप बेस्ट लिए अब यू नो इफेल्स यूज कर सकते हैं इस विकेशन गो विच स्विच जो बहुत ही ज्यादा सिंपल है एक्शन डॉट टाइप हमारा यह जो एक्शन इसके पास हमारा एक सिंपल मेथड डेट डॉट टाइप उसकी मदद से में पता लगा सकते कि क्या टाइप है मतलब यूजर ने प्लस पर क्लिक किया या माइनस पर उसका टाइप क्या वह मैं गेट कर सकता हूं अगर इनकेस यूजर ने क्लिक किया इस पर प्लस पर ठीक है तो आप बिल्कुल टेंसर मत लो यह जो प्लस है ठीक है यहाँ पर अभी मैं यहाँ पर वह ऑन क्लिक पर वह जो फंक्शन को कॉल कैसे करना है वह मैं आपको बता दूंगा लेकिन आप यह फिलाल यह समझो कि प्लस पर क्लिक करके मुझे इंक्रीमेंट करवाना है एं� कि ठीक है तो यह इंग्रीमेंट को मैं कॉपी कर लेता उसका टाइप मैं यहां पर चलता हूं केस अगर मेरा रहा इंक्रीमेंट ठीक है एक्सएंट टाइप अगर रहा मेरा इंक्रीमेंट तो मैं गैस यहां पर सिंपली चलकर लिख दूंगा रिटर्न जहां पर मेरा इनिशन स्टेट है प्लस जीरो सॉरी नॉट जीरो वन तो जब जब उस पर क्लिक करेगा मेरा जो कि ऑफ टू डू किस तरीके से करना है और बेस रिखा ली मुझे एक माइनस करना है दिस इजेट एंड से बितना नहीं एक डिफॉल्ट के जब हमारे पास होता है ठीक है डिफॉल्ट एंड यहां पर मुझे सिंपली रिटर्न कर देना है काम हो चुका है अब भी यह जो रिड्यूसर यह मुझे यूज करना है हम इसको बहुत जगह उसका सकते राइट रिउसेबल जैसे आप देखा तामने एक्सपोर्ट डिफॉल्ट एंड आपका यह चेंज दिन अंबर जो है यह आइएंट मेरा काम हो गया चलो ठीक है हमने हमारे reducer की मदद से यह जो action increment and decrement कैसे perform करना वो हमने सब लिख दी है so now guys यह जो change the number है आप इसको directly you know store create करके वहाँ पर store कर सकते हो लेकिन मैं वो नहीं करूँगा वो इसलिए क्योंकि फिलाल तो मैंने एक ही reducer create किया पर नहीं कर सकते क्योंकि वह ऑनली नेट वान रूट यूजर जो मैंने आपको बताता है याद है अगर आपको याद होगा तो सिर्फ एक रूट रिडूसर स्टोर को लगता है मैंने आलरेडी आपको बताया था यह डेट्स वाइ मैंने इंडेक्स टॉट जस फाइल क्रिएट किया हुआ है रिडूसर के अंदर ताकि आप जितने भी रिडूसर आपको क्रिएट करना करो लेकिन इंडेक्स के अंदर जाकर सिर्फ एक ही आ� तो वन वाइवन आपको इस तरीके से उसको करना होगा गाइस ऑल एड कहां चला गया वह यहां पर इस जगह पर ठीक है तो मैं यहां पर चलता हूं इस तरीके से चेंज दिन अंबर फ्रॉम कहां से फ्रॉम ऑफिस लियार मेरे आप एंड आउन से इस इस इतना इस तरीके से दो कोई ऑब्जेक्ट बहुत ज्यादा इंपोर्टेंट विकॉज रिडूसर इज ऑब्जेक्ट टीविंग सो कंबाइन फ्रॉम आपको सिंपली यहां पर चलना है एंड रिडक्स दिस इट आपका काम हो गया अब बहुत ज्यादा सिंपल है कौन स्टाफ का में रिड्यूसर ठीक है मैं यहां पर लिख देता है इसलिए रूट रिड्यूसर चाहता आप कैसे भी लिख सकते हैं कुछ नहीं है रूट रिड्यूसर रिड्यूसर एक ही लिखा तो काफी है एंड अब यह जो कंबाइन रिड्यूसर है इसको लिखना है ठीक है आपका यह अगेन ऑब्जेक्ट है ठीक है तो इस तरीके से दिस इजिट एंड यहां पर वन वन आपको कि कल के दिन सब्सक्राइब करना तो चेंज दिए बैकग्राउंड तो आप उसका भी तो कोड लिखोगे ना बैकग्राउंड चेंज कर बोलकर यू नो उसका भी कुछ कोड लिखोगे तो आप इस तरीके से वन वाइव वन यहां पर उसको ऐड करा सकते हैं अब यह जो रूट रिडूसर यह मेरे बहुत ज्यादा इंपोर्टेंट इसको आपके लिए बिसिकली आप यह कुछ इस तरीके से इस इस अब मुझे इसको एक्सपोर्ट करना पड़ेगा एक्सपोर्ट डिफॉल्ट आपका जो रूट रिविशर है इस इस अब मैंने चलना है स्टोर डॉट जेस के अंदर मैंने एक्शन की मदद से बता दिया कि क्या क्या एक्शन होने वाला है रिविशर की प्रश्न से मैंने यह बता दिया कि उस एक्शन को पॉफर्म कैसे करना है अब हमारा जो रिविशर है वह वह करेंट स्टेट तो मेरा यह जो एक्शन है मेरा जो रिविशर है एंड मेरा जो कंप्लीट स्टेट है यह जो रूट रिविशर इसको अब मुझे स्टोर पर एड करना है क्योंकि इसी में ही मेरा सब कुछ होता है ठीक है तो देखो मैं चलता हूं यहां पर इंपोर्ट सिंपल स्पेलिंग से रिखना इंपोर्ट रिड्यूसर फ्रॉम कहां से मैं चलता इस तरह के से एंड विफ्रॉम माइड रिड्यूसर फॉरवर्ड स्लैस इंडेक्स इस इस ठीक है और उससे पहले आप एक चीज करो बहुत ज्यादा इंपोर्टेंट लैट इस हमें अब इस टो क्रिएट करना है और उसके अंदर रूट रिड्यूसर को हम स्टोर करके रखना है तो इंपोर्ट मैंने आपको अलड़ी बताता है कि हम किस तरीके से स्टोर को क्रिएट कर सकते ठीक हैं सो इसके लिए हम यहां पर चलना पड़ेगा क्रिएट स्टोर सिंपली आपका रिडक्स इतना ज्यादा सिंपल मैं यहां पर चलता हूं आप तो बहुत ही ज्यादा सिंपल है ठीक है इतना कुछ है यहां पर हाई फाइड कॉन्स्ट स्टोर आपको लिख देना है डॉट एंड आपको लिखना पड़ेगा क्रिएट स्टोर और आईट सॉरी नॉट डॉट यह जो आपका root reducer इसके अंदर आपकी application का सारे state है उसको मैंने simply create store के अंदर add कर दिया है अब यह आपका global centralized state है इस store को जो भी call करेगा data उसको easily प्राप्त हो जाएगा बस इतना ही है आपका redux मैंने आपको बता दिया तो guys अब मुझे क्या करना है इस store को अपने main application पे भी तो add करना पड़ेगा import करना पड़ेगा ताकि छोटे-छोटे component या जितने भी components हो वो इनको use कर सके ठीक है तो अब मुझे इसको भी export करना पड़ेगा so export डिफॉर्ट एंड स्टोर सिंपल दिस इट मेरा काम हो गया इस टोर को अपने हटा देता हूं ठीक है अप एंड डाउन इसको मैं हटा देता हूं मेरा यह क्या है इंडेक्स टॉट जस रिडूसर इसको हटा देता हूं एक्शन को मैं हटा देता हूं ठीक है अब हम कहां आगे थोड़ा सा कम जूम करता हूं देखो अब मैं वापस अपने एप डॉट जस के अंदर हूं लेकिन इसको भी म� कि यहां पर चलकर गाइस अब बहुत ज्यादा इंपोर्टेंट डेट इस वह जो इस टोर उसको मुझे इंपोर्ट करना है इंपोर्ट स्टोर फ्रॉम फ्रॉम स्पेलिंग एकदम सही लिखना है ठीक है यहां पर मैं चलता हूं डॉट फॉरवर्ड स्लैस कहां पर डॉट वी है वह सब्सक्राइब करके एक मैथड में आपको दिखाया था यू नो सब्सक्राइब सिंपल एंड यह क्या करता बिसिकली इट्स कॉल अचेंज लिस्न तो ठीक है मैं यहां पर चलता हूं सब्सक्राइब एंड इसके अंदर में फैटर फंक्शन तो अब इसको रन करता हूं कुछ नहीं है है और राइट आई थिंग हां चलो गए सब कुछ पॉफेक्ट है ठीक है यहां से मैं अटा देता कंट्रोल से यहां पर चलता हूं इसको एक बार में रिफ्रेस करता हूं इंस्पेक्ट अब आप देखोगे कंसोल पर गैस मुझे इतना कुछ दिखाई दे जाए एंड वैल्यू प्रॉप टू ऑफ फॉर्म फिल्ड विदाउट एन ऑन चेंज हैंडलर ओके यह जो एक पोर्शन है यह मैं अभी हम एक प्लास यूज नहीं करना नियुक्त चलो ठीक है है एंड यह जो वैल्यू है फिलाल इस वैल्यू को मैं हटा देता हूं इस फिलाल वैल्यू को मैं हटा देता मुझे से कोई मतलब भी नहीं है तो यहां पर फिलाल कुछ दिखेगा नहीं एंड स्टोर वेब पैक इनपोर्टेड डिफॉल्ट सब्सक्राइब इस नॉट अफंक्शन और लाइट मैंने साइड स्पेलिंग रॉन लिखी है सब्सक्राइब सी आराइबी ए देखा देता है और इसको चीजें एक और चीजें फिलाल उसके में यहा है और लगाइस तो अपने इस पर क्लिक करूंगा एंड आप देख सकते हैं कि कुछ हो नहीं रहा है मेरे पास ऑलरेडविड एक्स का भी डेब टूल्स है एंड यह सिक्स्टी क्यों दिखा रहा है आई थिंग गाइस इसके ऑलराइट मेरे प्रीवेस वाले कोई नहीं है अब आप देख सकते हो कि रिडक्स डेब टूल पर जब मैं गया तो बता रहा है नो स्टोर फांड ठीक है यह इसलिए मैं आपको बताता देखो जैसे मैं यू नो जब भी रियाक्ट का कुछ भी क्रिएट करता हूं तो वहां पर मैं उसी तरीके से जब आप Redux पर यूज़ करते हैं तो we have a Redux का DevTools ठीक है उसको install करने के लिए we need देखो मैं यहाँ पर लिख देता हूँ Redux DevTools Simple यहाँ पर आप देखो यह जो दिखाई देर है इसको मिस्टर की से क्लियर आपको इसको किस तरीके से चलाना है वह यहां पर बताया बहुत अच्छी तरीके से देखो आप जब स्टोर क्रिएट करते हो कॉन्स्ट स्टोर क्रेट स्टोर आपका जो रिडूसर है उसके बाद आपको यह एक पीस अप कोड है उसको कॉपी करना है ठीक है आप हमारा जो एप्लीकेशन वहां पर मैं चलता हूं इस जगह पर हमारा यह जो भी है स्टोर यह जो रूट रिडूसर पामा एंड पेस्ट अब यह जब आप लिख देते हो तो काइस अब बहुत इजली रिडक्स का हमारा जो डेब टूल से वह हमारे इस एप्लीकेशन को चेक करेगा क्या स्टोर है स्टेट क्या है क्या नहीं है सब कुछ ठीक है आई थिंग इतने करना है ज्यादा कुछ है नहीं अब वह जब आपने इसको इंस्टॉल कर लिया यह पीसपोर्ट का अपने अपना यूनो डिडेक्स टोर के अंदर सिंपली ऐड कर दी है तो राइट तो आपको पर वह आप और एक्शन ठीक है वह आप और स्टेट एंड बुम वह आप और स्टेट डाइट इस चेंज अ दिन नंबर क्योंकि मैंने उसको यहां पर इंक्लूट कर दिया था रूट रिडूसर के अंदर एंड अगर मैं आपको चलता हूं रिडूसर आप एंड डाउन चेंज दिन अंबर फिर आपकी जो इनिशियल डाटा है डेटी जीरो अगर मैं इसको कर दूंगा दस वेल्यू टेन एज मैं इनिशियल डेटा तो इस तरीके से आपका देखो ऑस्टम चार्ट पर क्लिक करता तो मेरा स्टेट के अंदर एक और हमारा स्टेट है डाटी चेंज अ दिन अंबर एंड इस माइग्लोबल स्टेट आपके सकते हो चेंज दिन अंबर में फिर आल दस की वैल्यू रॉ आप देख सकते को जिससे किसी दिखाई दे रहा है ट्री है वह एक्शन चार्ट रॉ देखो कितना आसम दिखाई दे रही है कि स्टेट है अब एक चीज मुझे यह चाहिए था कि यहां पर डेट आठी है वह मैंने हटा दिया था तो मैं यहां पर चलकर वैल्यू को जीरो रख देता सबसे पहले देखो हमने एक्शन के मदद से क्या करना है वह तो बता दिया रिडूसर के मदद से कैसे है वह भी बता दिया एंड जो भी हमारा करेंट स्टेट या जो अपडेटेड था वह स्टोर पर एडवी कर दिया एंड इंडेक्स टॉट जेस के अंदर जाकर मैंने उसको गेट भी कर ली अब सिर्फ इतना लिखने से नहीं होगा राइट क्योंकि है तो मेरा यह जो ऐप है इस पर अगेन रियल फॉर्स में हमने ऑलरेडी समझा था एंड मैंने आपको दिखाए भी था हमारे इस पीटी में अगर आपको याद होगा गाइस और इस जगह पर यू नौ मैंने आपको दिखा दिया था कि विह अ प्रोवाइडर एंड कंजीमर तो रिडक्स फॉर्म भी सेम ही है लेकिन इंस्टेड ऑफ कंजीमर यहां पर यू सेलेक्टर है ठीक है बाकि बट रिडक्स आपका काम आता है एकदम बड़े एप्लीकेशन के लिए ऐसे इसमें आप बहुत इजली रिएक्ट उसका यूज कर सकते थे ठीक है तो मैं यहां पर चलता हूं देखो अब मुझे क्या करना है अब बहुत ज्यादा सिंपल है मुझे यहां पर मिलना है अब मुझे वह प्रोवाइडर लगेगा ताकि अपना यह जो एप है मेरा जो मेन एप है यहां पर उस प्रोवाइडर की जरूर से मेरा जो सेंट्रलाइज्ट जो मेरे स्टोर है वह सबको में प्रोवाइड कराना चाहूंगा ठीक है तो इंपोर्ट आपको प्रोवाइडर ठीक है प्रोवाइडर सिर्फ प्रोवाइडर फॉर आपका कहां से रियक्ट रिडक्स अब मैं अपने रिडक्स को रियक्ट से कनेक्ट करने जा रहा हूं सिंपल तो मैं इसके नीचे चलता हूं सिंपली इस तरीके से प्रोवाइडर प्रोवाइडर और इसको बजे डिलेट करना पड़ेगा एंड इस इस अब मेरा जो मेन एप कंपोनेंट वह प्रोवाइडर के अंदर आ चुका है राइट कि प्रोवाइडर के अंदर विहाब यहां पर कुछ भी लिख सकते अब मुझे ऐड प्रॉप्स इसके अंदर पास करना है तो सिम्म जो गाइस हमारे रिएक्ट हुक्स में था यहां पर भी से अपने प्रोवाइडर की मदद से प्रॉप्स पास कर सकता हूं जहां यह इस स्टोर के अंदर में यह हमारा जो स्टोर है उसको कॉपी एंड पेस दिस इजिट अब हमारा यह जो ऐप है में तो यह ना एप के अंदर तो सब कुछ होता है याद है आपको हमारा यह जो एप है एप के अंदर सब कुछ एप को कि चाहे इस कंपोनेंट हो या यह कंपोनेंट हो या यह या यह वह स्टोर को गैट कर सकता वह गैट कैसे करेंगे वह देखो मैंने मेरा जो मेन एप है उसको मैंने यह सेंट्रलाइज डाटा प्रोवाइड करवा दिया सिंपल मैंने प्रोवाइड करवा तो अब मुझे सिर्फ चाहिए तो यह कि हमारे यह जो इंडिविजुअल कंपोनेंट वह इस स्टोर की मदद से डाटा को कि बहुत ज्यादा सिंपल कॉल भी कैसे करेंगे गाइस कॉल करने के लिए दो है या तो प्लस बटन को क्लिक करेंगे तो माइनस को क्लिक करेंगे ठीक है अब मैं यहां पर चलता हूं अब मुझे चलना गाया देखो मुझे चलना होगा मेरा में आफ डॉट जस ठीक है यहां पर ध्यान से देखना सबसे पहले तो मुझे कि मेरा जो करेंट स्टेट है मेरा जो इनिशन स्टेट है ठीक है वह मुझे चाहिए ना ताकि मैं वह जो जीरो जहां है वहां पर उसको मैं ऐड कर सकूं फिर लाइक विशेष प्रोवाइडर और लाइक ऐसी है यह तो आपको याद है मैंने इसको डिलीट ऑलरेडी करी चुका था तो एक बार रिफ्रेस करना मात्र है तो यह जो जीरो दिखाई दे रहा है यहाँ पर मुझे मेरा करेंट स्टेट चाहिए इस जगह पर तो मैं कैसे करूंगा देखो यह बहुत ज्यादा है अब आपको देरे-देर सब्सक्राइब कर रहा हूं क्योंकि मैं सिर्फ रिडक्स तो रिडक्स नहीं बता रहा मैं उसको कंपेयर भी कर रहा हूं कि ऐसा रिएक्ट में पहले था उसमें ऐसा था बोलकर ठीक है क्योंकि गाइस तब पर चलता हूं इसके अंदर ठीक है यहां पर इस तरीके से यूज सेलेक्टर मुझे लगेगा एक सेकंड पूरा पूरा उठकर आ जाता आप यूज डिस्पैच यह क्या है आपको पता चल जाएगा लेकिन यूज सेलेक्टर तो आपको पता चल गया होगा क्यों उसका रॉम है ठीक है रिएक्ट रिडेक्ट चलो दिस इज इतना मेरा काम हो गया है अब यूज सेलेक्टर की मदद से मैं यहां पर चलूंगा लिख सकते हैं ऐसा कुछ नहीं है एंड यूज सेलेक्ट देखो अब इस तरह से जाऊंगा यूज सेलेक्ट आई यूज सेलेक्टर लिख देता हूं बहुत ज्यादा सिंपल है ठीक है एंड अब इसका जो पेरेंथेसिस है अ कि उसके अंदर गाइस बिसिकली फैटर फंक्शन चलता है जहां पर अब यहां पर पूछ लिख सकते हो ठीक है क्योंकि यह तो आरोमेंट होगा ना तो यही सेम स्टेट जो है स्टेट के अंदर वह है वन प्रॉपर्टी एंड डेट इस अब मैं वह जो रिडूसर है उसको कॉल कर सकता क्योंकि मैंने स्टोर की मदद से मैंने वह रूट रिडूसर को पास कर दिया था एंड है एंड मेरा जो एप डॉट जैसे यहां पर मैं पास कर दूंगा तो यह जो मेरा चेंज द नंबर जो इसका जो इनिसियल स्टेट है वह मुझे अपनी लेगा बहुत इजिली ठीक है तो मैं एजिटिज रखते तो कंट्रोल सेप करता हूं दिसीजिट इतना करना था ज्यादा कुछ है नहीं है एंड वस्त गाइस है यह जब आप प्रोवाइडर की मदद से ह��ारा जो मेन एप को डाटा वह नोट उस डेटा को गेट कर सकते हैं ठीक है तो अब यह जो माइस्टेट है यह जो मेरी वैल्यू जीरो जो लिखी हुई है उसकी मदद से मैं यहां पर चिपका दूंगा माइस्टेट अब अगर मै कंट्रोल ऐसे पर तौर में दस लिखा है गाइस इनिशन ऑल एड एक्ट्री में दस लिखा हुआ फिलाल के लिए जीरो कर देता हूं कंट्रोल ऐसे एड एंड मैं यहां पर चलता हूं और वैसे तो रिफ्रेस करने की नहीं पड़ती लेकिन जीरो आ गया है लेकिन एट लिस आपको पता चल चुका कि मैंने स्टोर से डाटा को गेट कर लिया बहुत इजिली ठीक है एंड इस तरह तो मैं चाहता हूं तरीके से इस तरीके से लिख सकता हूं यहां पर चलकर और राइट यहां पर देखो ऑन क्लिक ठीक है जब भी हम इस पर करेंगे क्लिक तो मुझे क्या करना है गाइस मुझे एक फंक्शन चलवाना होगा ठीक है तो कलीब्रेस क्योंकि या तो डिक्रीमेंट तो इंग्रीमेंट करने के लिए मेरे को यह वाली जो फंक्शन इसको पॉल करने पड़ेगी ठीक है एंड यह देखो एक्सपोर्ट है यहां पर एक्सपोर्ट है तो पहले मैं इनको क्या कर लेता हूं यूज करने के लिए मुझे इनको करना पड़ेगा यहां पर इंपोर्ट तो मैं चलता हूं इस जगह पर इंपोर्ट पोर्ट इस तरीके से डायरेक्टली में इंक्रीमेंट नंबर एंड अगेन इसको चलता हूं कॉपी करके यह जो मेरा एक और फंक्शन कॉपी करता हूं पेस्ट डिक्रीमेंट नंबर फ्रॉम कहां से फ्रॉम पॉल्ट स्लैस मेरा एक्सपोर्ट फॉरवर्ड स्लैस मेरा इंडेक्स इस इजिट मेरा काम हो गया अब जो इंक्रीमेंट नंबर है इसको मैं बहुत इजिल यूज कर सकता हूं अब बस मुझे इस फंक्शन को कॉल करना है लेकिन मैं डायरेक्टली यहां पर इंक्रीमेंट नंबर है अगर मैं ऐसे टीज रख दूं तो भी गाइस कुछ काम करनी रहा है ठीक है इस डिफाइन बट नेवर इस अब कि कैसे हो इस फंक्शन को मैं कॉल कैसे करें क्योंकि एक्शन वाला यह जो फंक्शन है मैं कॉल कैसे करूंगा सुफॉर्ड एड विहेब डिस्पैच डिस्पैच एक्शन को ट्रिगर करता है ठीक है एंड इन रिडक्स के फॉर में बोलो है तो अब वह डिस्पैच को मैं कैसे कर सकता हूं विद यह पॉप यूज डिस्पैच हुक जो कि रिएक्ट रिडक्स अप्रोवाइड करवाता है अगर इसके नीचे मुझे चलना है यहां पर कॉन्स्ट अ इस पैसे लिख रहा हूं इस तरीके से सिंपल विल बिए इकॉल टू मेरा एक सेकंड यह नहीं मेरा यह जो यूज डिस्पैच है कॉपी एंड पेस्ट एंड दिस इज इट यूज डिस्पैच के फंक्शन के मदद से इसको मैंने गेट कर ली डिस्पैच मैं यहां इस इज एड एंड यह जो है वह मेरे फंक्शन है तो अपने सिर्फ इसको कॉल करूंगा तो सिंपली कंट्रोल है सेव मैं मुझे माइन इसके लिए चाहिए तो गैस वन सेगे मैं यहां पर चलता हूं देखो जब भी मैं करूंगा एम माइन अपने पर क्लिक ठीक है तो गैस कलीब रेसेस दैन यहां पर मुझे चलना है मेरा फैटर फंक्शन एंड एक्शन को कॉल करने के यह सोला 17 18 19 20 यह देखो कम होते जा रहे सुनाओ कैसा लगा गाइस यह है ना कितना ज्यादा सिंपल आइन आपको लगाओगा यारे बापरे यह क्या कुछ कर दिया मैं क्योंकि यूज स्टेट हुक्स की मदद से मैंने सिर्फ पांच लाइन एक फाइल दो फाइल तीन फाइल चार पांच और एक और है वहां पर तो पांच लाइन एंड पांच फाइल अब आप सोचो मैंने वह हमारे एप को पास कर दिया अब कल के दिन जिसको भी डाटा चाहिए वह बहुत इज़िद इसको कॉल करेगा डाटा गेट करेगा एंड जो भी एक्शन पर हम करना होगा यह ऑलरेड मैंने आपको बताता है इट्स अरीउसेबल कोई भी अब उसको इसको सब्सक्राइब करता हूं कि यह किस तरीके से हो रहा है एंड आपको पीपीटी में समझाया था कि आपका यह एक्शन क्या है रिडूसर क्या है स्टोर क्या है आपका क्रिएट स्टोर से क्या होता है डिस्पैस से क्या होता है लेकिन फिर वह टाइम आपको एक्सप्लेंट करना चाहूंगा देखो हमारे एप्लीकेशन क्या था इंक्रीमेंट डिक्रीमेंट कांटर प्लस एंड मुझे माइनस करना है ठीक है मतलब बेसिकली फंक्शन अगर इन सिंपल वर्ड बोलो तो जावास्किप्ट हमने एक्सन नाम का एक फोल्डर क्रिएट किया है और उसके अंदर मैंने बता कि हमारे इस एप्लीकेशन में सिर्फ मुझे प्लस एंड माइनस इंक्रीमें� कि वाट टू डू अगर कोई प्लस पर क्लिक करके इंक्रीमेंट कांटर को कॉल करता है इस फंक्शन को कॉल करता है तो यह एक्शन पॉफर्म करना है एंड वास्ट आपने इसके एक बार डिफाइन कर दिया तो आप टर एक्शन वह अब रिडूसर उसको कैसे करना है तो रिडूसर में मैंने आपको बता दिया अगर इंक्रीमेंट होता है तो वह एप स्टेट जो भी होगा तो उसको मुझे store पर add करना है, that's why we have our store.js and कल के दिन multiple reducer होंगे न आपके पास that's why मैंने आपको combine reducer all right actually combine reducer तो यहीं पर ही है that's why मैंने आप लोगों को combine reducer के अंदर उसको pass करके दिखाया and हमने एक new reducer create किया जिसका नाम था root reducer अब यह जो root reducer है वो मैंने store.js के अंदर pass कर दी and with the help of create store मैंने एक new store create किया and वहाँ पे मेरा जो component है, मेरा जो application उसका सारा data pass करवा दिया है तो इस तरह से काइस आपका यह सब कुछ हो गया है एंड ना वह डेटा को पास करने के लिए हमें लगता है प्रोवाइडर डेट्स हमें प्रोवाइडर यूज किया विद थी हेल्प ऑफ रिएक्ट रिडक्स ठीक है एंड तो उसके अंदर हमने ऐज प्रॉब्स वह जो स्टोर है जिसके अंदर सारा माइस्टेट उसको पास कर दी अब वह जब सब कुछ एप के पास आ चुका है तो कल के दिन गाइस चाहे जो भी यह कंपोनेंट चाहे जो भी कंपोनेंट हो वह सिंपली अब इसको कॉल करेगा एंड डेटा विद यह पॉप यूज सेलेक्टर विद देखोगा इस स्टेट को गेट कर रहा है बहुत इजली एंड फंक्शन को कॉल करने के लिए इस एक्शन को ट्रिगर करने के लिए तो वी नीड आट डिस्पैच तो उस डिस्पैच को पाने के लिए भी अगर विनिट तो बस इतना ही करना था कि फिर रिडूसर की मदद से अगर वह लूप चलता जाएगा तो यह होता है आपका रिडक्स ठीक है तो आपको वीडियो बहुत पसंद आएगा लेकिन वह थिंग आपको दिखाना चाहूंगा जैसे स्टार्टिंग में दिखाया था कि इस पर अगर क्लिक करूं तो पांच ऐड हो जाना चाहिए एक की बार में तो बहुत इजली कर सकते हैं यह मेरा इंक्रीमेंट नंबर है यह है तो मैं एक्शन के पास चलूंगा इंडेक्स डॉट जीएस यहां पर देखो अब यह जो इंक्रीमेंट है यहां पर सिर्फ इंक्रीमेंट एक फिल्ड डेटिश व्यक्ति लेकिन वहां पर मैंने फाइव ऐड कर दिया तो मुझे अब वह एक पैरामेटर तो ना यह जो नम है इसमें मेरे पास एक वैल्यू है डेट इस फाइब ठीक है एंड पेलोड के अंदर में इसको पास कर दे कि एंड वैल्यू अब जब आप इस तरह के से यू नो एक्शन क्रिएट कर लेते हो तो उसका कॉल कहां जाता है वह जाता है रिडूसर के पास तो रिडूसर आप एंड डाउन में ऑलरेडी हमें मालूम है जो मेरे स्टेट है एंड इंक्रीमेंट के अंदर हमें मालूम है कि हमें एक डाटा मिल रहा है तो उसको पाने के लिए पता है यह जो मेरा एक्शन है तो एक्शन मैं लिख लेता हूं डॉट वहां पर कि कंट्रोलेस चेप करता हूं इसी इतना ही करना था अब मैं यहां पर चलता हूं यह देखो एक बार रिफ्रेस करना पड़ेगा 5 10 20 15 एमिन सॉरी 25 30 तो है न कितना आशंक क्योंकि मैंने बहुत हो गई देखा कि बहुत सभी लोग सिर्फ जब भी यू नो एक्सेंट डॉट लिखते हो ना उसके बाद बेसिकली यहां पर अपने जो की है बेसिकली आपका कि यहां लेकिन अगर अगर अगर अ तो गाइस दिस इस वीडियो के लिए इतना ही आप लोगों के लिए एक चैलेंज की जिस तरीके से मैंने इंक्रीमेंट करवा है मैं चाहूँगा 5 से इसको डिक्रीमेंट करवाओ और उसका कोड नीचे कमेंट पर जरूर कॉपी प्येस करवा देना तो गाइस आपको इस वीडियो कैसा लगा नीचे कमेंट करके जरूर बताना आपका जो इतना डाउट था रिडग्स क्या है रिडग्स क्या है तो आपको रिडग्स पता चल गया होगा मैंने आपको पूरी थिवरी बताया आपको पूरा एक्जांपल बताया पूरा प्रैक प्रोजेक्ट में आप कर सकते हो और थोड़ा बहुत डिफरेंस है तो मैं बस इतना चाहूंगा कि यह वीडियो देखने के बाद प्रोब्ड ड्रिलिंग को जरूर कीजिए और आप मुझे बताना कि आपको ज्यादा सिंपल रखा या रियाट हुक्स का जो अपडेटेड ज्यादा नहीं खाली 10K ताकि आपने वीडियो के लिंक में आप लोगों के साथ यहां पर भी सेयर कर सकूं और मेरे चैनल थापा टेक्निकल को अभी तक अगर आपने सब्सक्राइब नहीं किया तो तिल लें गाइस थैंक यू सो मच टेक किया आप अ प्रेम प्रेम प्रेम