हाँ जी कैसे हैं आप सभी स्वागत है आप सभी का चाय और कोड में अगर आ गए हैं सभी अभी तक तो फटा फट कमेंट्स में अपनी अटेर्नेस छोड़ते जाए कि हाँ जी हम भी आ गए हैं जब भी आए हैं लेट आए हैं जल्दी आए हैं किस मंथ में आए हैं किस येर में आए हैं कि लोग बग कब किस महीने में किस तारीक को किस येर में actually में knowledge लेने के लिए Redux की journey को समझना भी ज़रूरी है, उसकी implementation को भी समझना ज़रूरी है, थोड़ी सी history तो हम हर बार ही touch करते हैं, पता है इसलिए touch करते हैं, तो history के बारे में भी जानेंगे, उससे पहले एक interesting, important बात मैं आपको बता दूं, अभी तक हम सारा काम functional की तरह से कर रहे हैं, एक function बना के export कर दे रहे हैं, लेकिन react के अंदर कुछ काम classes based पे भी होते हैं, class based component पे भी बनते हैं, हाला कि ट्विटर पे अगर आप कभी स्क्रीन शॉट भी लगा देंगे कि ये मेरे class-based components है, काफी लोग अभी भी आपको कहेंगे अरे ये क्या कर दिया बहुत ही बेकार है, क्योंकि जातर लोग अब इसको deprecate करना ही चाते हैं, almost मुझे तो नहीं पता कोई organization जो बची है, जो हाँ जी बिलकुल अच्छी बात है कोई बुरी बात नहीं है इसके अंदर लेकिन इनको priority पे नहीं रख सकते अभी जो हमारा course है जो मैंने पूरा structure किया उसको खतम कर लेना ज़रूरी है उसके बाद हम optional bonuses में उनके बारे में पढ़ सकते हैं क्योंकि वो skippable topic है आपको है वो knowledge अच्छी बात है नहीं है तो भी कोई पूछने नहीं वाला तो एक class based component उनमें से एक है और एक classic redux कैसे काम करता है ये भी उसमें से एक topic है आज की date में जो redux है वो थोड़ा modernized redux है जिसको हम redux toolkit बोलते हैं RTK भी नाम है इसका लेकिन ये eventual upgradation है Redux का, ये मैं भी आपको बताऊंगा किस तरह से काम करता है, ये भी almost similar to React है, but इसकी भी बड़ी interesting history है, अच्छी story है, जो आपको पता होनी चाहिए, तो वो भी हम यहाँ पर discuss करेंगे, उसके बाद हम देखेंगे कि कैसे हमारे जो अभी तक के videos आए हैं, क्यों तो यहाँ पे हम देखेंगे कि किस तरह से अभी तक हमने जो पढ़ा है context API वगरा यह आपको help करेगा, Redux के बारे में जान��े के लिए, और बड़ी ही आसानी से, smoothly आप Redux Toolkit पे transition हो जाओगे, कोई भी project Redux Toolkit में आप बना पाओगे, इतनी guarantee है, confidence होगा आपको, यह अती ही simple है, हाँ जी इसको simple बनाने में बहुत time लगा है, बहुत महीन हो गए हैं, लेकिन ये actually में बहुत simple है, इस video के तुरू हम समझेंगे, ठीक है, तो पहले हम आते हैं, हमारी screen के पास आते हैं, तो जैसे ही आप Redux search करेंगे न, तो आपको ये website मिल जाएगी, redux-toolkit.js.org, हाँ जी का� अच्छा जी ये तो हो गया Redux Toolkit, Redux सर्च करूँ तो कहाँ पे जाओंगा, तो आप देखेंगे आपको मिलता है ReduxJS.org, तो आप चल जाते हैं Redux की Original Website पे, इन फैक्ट, Toolkit पे भी जब आते हैं, तो एकदम बॉटम पे आपको मिलता है Redux और React Redux, तो सबसे इंपोर्टन जो बात है हमारे पास समझने के लिए, वो सबसे पहली बात तो ये है, कि अक्चुली में जिस तरह से हमने देखा था, कि हमारे पास React है, एक तो, और एक चीज हम तो इसी तरह से हमने देखा था कि react अपने आप में एक अलग library है और react-dom अपने आप में एक अलग library है। और react को अगर browser पे काम कराना है तो हमारे पास react-dom है और अगर आपको mobile पे कराना है तो native है। इसी तरह से game development वगरा सब के लिए अलग-अलग है। Redux की भी कहानी कुछ इस तरह से ही है कि हमारा जो Redux है वो अपने आप में एक independent state management library है। और रीडक्स को अगर आपको जिस भी फ्रेमवर्क में इंप्लीमेंट करना हो उसका इसका सगा भाई मिल जाता है इसको एक तरह से यह कह सकते हैं तो आपको इस तरह से मिलेगा कि वहाँ पे भी आपको रियाक्ट रीडक्स मिल जाएगा तो उसी तरह से रीडक्स को आप कहीं पे bridge बनता है ताकि आप उसको react में use कर पाओ उसके लिए हमारे पास react-redux होता है ठीक है देखा इतना कुछ difficult था नहीं इतना जितना लोग हौवा बना देते हैं कि ठीक है अब हमें पता है कि हाँ redux अपने आप में independent library है उसको connection देने के लिए react के साथ react-redux मिल जाता है बस इतनी नहीं था ठीक है अब आते हैं हमारी redux library पे ये हमारी core redux library और ये है हमारी redux toolkit तो दोनों में अंतर क्या है क्यों हम react, redux के बारे में देखें, और क्यों toolkit के बारे में देखें, तो इसके पीछे कहानी समझनी पड़ेगी, कहानी actually में start कहां से होती है, कहानी कुछ यही से start होती है, अब देखें, यह हमारा सबसे outer उसके अंदर हमने एक और component करा, dashboard मान लीजे, dashboard का left side मान लीजे, इसको right hand side मान लीजे, जो भी आपको मानना है मान लीजे, अब problem क्या हो रही थी कि जब भी हमें prop पास करना था, तो हमारी prop की problem अभी भी वोई थी, कि इसके अंदर अगर मुझे पास करना है outer से inner के अंदर, तो क अब context API में हमने क्या देखा कि भाई एक काम करो सारी चीजे एक center में store कर लो, जिसको भी जब चाहिए वो एक hook से ले लो, तो हम used नाम से एक hook बना लेते थे, और उसकी value ले लेते थे कि हम एक context यूज़ करना है, और provider से wrap कर देते थे, कुछ इसी तरह की कहानी थी, अब ये जो problem है न, जो use context वगरा या context API को हम use करते हैं, ये कहानी actually में इतनी पुरानी है, कि context API तो बहुत बाद में आया, तो देखें ये जो development है ना ये काफी दिनों से चल रहा था और Redux तो actually मैं काफी बाद में आया पहले इससे भी पहले एक था Flux अब यहीं पर मैं आपको एक चीज समझाना चाता हूँ देखें Flux जो था वो architecture Facebook ने design करा था क्योंकि state management की problem उनको भी आ रही थी कहां पे component के अंद मैं कहता हूँ क्यों Redux में एक हाम होना चाहिए Flux भी तो पता होना चाहिए क्योंकि ये सब Derive तो Flux से हो रहे हैं लेकिन ये सही बात नहीं है Just because किसी ने कुछ कह दिया उसके पीछे Logic तो बताओ मुझे क्योंकि यो पुराना है पुराना तो Flux भी है लेकिन ऐसा नहीं होता क्योंकि आज की डेट में जो Developer तयार हो रहा है उसको एक Basic knowledge होना चाहिए पुराने वर्जन का हलका सा Idea कि हाँ ऐसा भी होता है ताकि वो Legacy Systems को Support कर पाए और आज से 6 मेने बाद आप नौकरी के लिए जाओगे, या फिर एक साल बाद आप जाओगे, तो तब तक तो वो full-fledged market में होगा, तो best से best है, पढ़ना ही जादा better है, तो इसलिए जब लोग कहते हैं कि Redux toolkit नहीं है, आप Core Redux पढ़ो, अरे बाई, Core Redux क्यों पढ़ना है, आ अब flux की main कहानी क्या थी, कि देखे एक तो सबसे बड़ी problem थी, state management, ठीक है, एक central store होना चाहिए, जैसा कि हमने यहाँ पे भी देखा कि एक central store होना चाहिए, सारा data मैं यहीं से ले लूँ, global variable तरह से, ठीक है, यह काम यहाँ पे भी होता था, लेकिन इसके अंदर एक और जो काम Data flow का काम यह होता है कि data एक ही तरह से store के अंदर जाए और update हो जाए और जब भी मैं value लूँ तो store से इस तरह से value लूँ. तो किस तरह से values update होगी और किस तरह से मैं values को use करूँगा इसका एक structure होना चाहिए, इसका एक mechanism होना चाहिए. वरना क्या होगा problem हो सकती है जैसे कि आपने देखा था हमने जब use context use किया था तो जो भी array के अंदर values थी हम पहले उसको spread कर रहे थे क्योंकि मैं उसे पुरानी values खोनी नहीं थी. आविसी बात है सारी values आप overwrite कर दोगे, तो कोई ना कोई structure होना चाहिए, जिसमें ये सारी चीज़े automatically manage हो, कि मैं बस array के अंदर values डाल रहा हूँ, या नया array create कर रहा हूँ, तो अपने आप नया value मेरे को मिल जाए, मेरे को ना चिंता करनी पड़े, कि उसकी state को spread करो, ये सब काम काफी दिक्कत वाला है, अब flux का जो data flow था न, तो इसलिए क्या है, फ्लक्स से इंस्पायर होके हमारे पास, अराउंड, एक्जैक्ट मुझे सन तो याद नहीं है, बट तकरीबन 2015 के आसपास ही मान लो, एक बड़ी अच्छी कॉन्फरेंस हुई थी, रियाक्ट के उसमें, हमारे डैन अबरमौव को, एंड्रू क्लार्क्स या एंड्रू क्लर्क, तो वहाँ पे उन्होंने पहली बार Redux को introduce किया, जो कि एक better version था Flux का, अलाकि इतना जादा नहीं था, बट ये सारी चीज वहाँ पे ही कुछ terms आई, जैसे single source of truth होना चाहिए, मतलब एक ही store होना चाहिए, state को सिफ read only होना चाहिए, you should never modify your state, or you should never mutate your state, तो ये concept उन्होंने ही दिया था, और changes जो भी होने चाहिए store में, वो functions के through ही होने चाहिए, directly कोई भी changes नहीं होना चाहिए, तो changes should be made as pure functions, या जिनको हम reducers बोलते हैं, कि reducers के through ही changes होने चाहिए, और changes नहीं होने चाहिए, ऐसा नहीं कि किसी ने भी function को लिया, उसमें value overwrite कर दी, तो वो थोड़ा सा problematic हो जाता है, कि आपने function का reference लिया, functionality reducers के through ही जानी चाहिए, यह आगे जाके बहुत ही अच्छा support देगा, उसके लावा हमारा जितना भी काम है ना सब एक proper mechanism से होना चाहिए, इसकी शुरुआत actually में Redux के अंदर हो गई थी कि इसी तरह से हम काम करेंगे, अब Redux जब आया ना तो लोगों ने appreciate बहुत करा क्योंकि जितनी भी JavaScript libraries थी उनके साथ में Redux काफी अच्छे से stick up हो रहा था, और Redux सिर्फ React की proprietary नहीं थी जो कि अकसर लोग course पढ़ते टाइम या पढ़ाते टाइम बोलते हैं कि React और Redux तो होता है, नहीं ऐसा नहीं है, Redux independent library है, यह view के साथ भी चलती है, react के साथ भी चलती है और और किसी javascript framework या library में लगाना चाहो वहाँ पे भी लग जाती है इसलिए यहाँ पे actually में इस तरह से बोला जाता है कि a predictable state container for JS app ना कि react apps वेबसाइट पर लिख रखा है वाई मैं अपने मन से थोड़ी ना बता रहा हूँ कुछ भी तो predictable है, centralized है, debuggable है, flexible है, काफी कुछ है अब इन्होंने react, redux भी निकाला, official binding for react और इसके बाद अभी एक latest इन्होंने निकाला है जो कि redux toolkit the official opinionated batteries included toolkit for official development ही ठीक है, flux से समझ में आया, journey start हुई, redux से समझ में आया लेकिन actually मैं अब यहां से जाने का क्या मतलब था देखें यहाँ पे क्या हो रहा था, Redux तो ठीक है चल रहा था, लेकिन कुछ एक दिक्कते Redux में आ रही थी, especially जैसे एक Redux Thunk नाम का एक concept है, कुछ middlewares है, जो आपको debugging में help करते हैं, इसके अलग toolkit, मतलब आप Chrome में जाके देखेंगे, तो आपको Chrome add-ons में मिल जाएंगे, और रखने भी चाहिए वो Chrome add-ons, तो आपको यहां मिल जाएंगे Redux DevTools, तो इस पे आप जाएंगे, मैंने install कर रखा है, क्योंकि मैं बहुत काम करता ही रहता हूँ इस पे, तो ये Redux का dev tools आपको मिल जाता है, इसको रखना चाहिए, कैसे use करते हैं, वो भी मैं आपको बताऊंगा, बड़ा अच्छा tool है ये, तो ये सारे काम थे न, actually में, तो ये सारे के सारे काम Redux में इतनी अच्छी तरह से नहीं थे, काफी मेहनत करनी पड़ती थी, मेहनत मतलब setup क लेकिन उसके बाद उन्होंने कहा कि देखिए ऐसे तो काम नहीं चलेगा, Redux अच्छा है, बहुत अच्छा है, लेकिन इसको और बहतर बनाया जा सकता है, तो इसलिए फिर आया Redux Toolkit, Redux Toolkit क्या था, Batteries Included, मतलब हजार सेट अप करने की जरूरत नहीं है, इसके अंदर आपको क्या है, आपको store बनाने का बहुत ही easy तरीका मिलता है, पहले काफी problem होती थी, मतलब configuration जादा थी problem तो क्या, वो कहीं ना कहीं copy paste आपको snippet में रखना पड़ता था, और वहीं से आप हर बार लेते थे, हमने भी ऐसे ही किया है, लेकिन अब क्या है यहाँ पे, आपके built-in middlewares है, आपका slicing, इन्होंने एक नया word introduce किया है, in fact आपके कुछ है ना, redux thunk type के जो middlewares है, ठीक है, अब यहाँ पे end होती है आपकी Redux की theoretical कहानी, history जिसको बोलते हैं, ठीक है, तो please एक बार comments में timestamp रख दीजेगा, कि यहाँ पे हमारी history lesson कतम हो गया है, history lesson वैसे, मैं कभी बताता नहीं हूँ YouTube वगरा पे, but मैंने notice करा है कि live classes में students को बहुत मज़ा आता है, अब आते हैं हमारे कुछ concept में, जो Redux या Redux Toolkit दोनों में ही आप देखोगे, सबसे पहला concept है आपका store का, store क्या है, कुछ भी नहीं है, यह है आपका, जहां से हम सारे की सारी चीज़े, single source of truth से ले लेते हैं, तो एक store बनाएंगे, global variable type से मान लो, उसके बाद एक reducer होता है, reducer क्या होता है, कि आपको store में कुछ भी change करना है, कौन से store में change करना है, क्योंकि auth का store, product का store, मतलब store के अंदर में नहीं store हो सकते हैं, तो रिड्यूसर्स क्या कंट्रोल करेंगे कैसे चीजों को अपडेट करेंगे फंक्शनलिटी वाला पार्ट रिड्यूसर्स के थ्रू ही जाता है तो रिड्यूसर्स क्या होता है अब यह एक एग्जांपल होंगा उसके बाद आपको यह तो मैं खुद ही कर लूंगा उसके ब ठीक है तो अब हम बनाते हैं एक project actually में जो कि हमें ये सब करके देगा और सारा का सारा काम देगा यहाँ पे actually मैं जादा focus नहीं हूँ कि मेरा UI का look कैसा है मुझे जादा focus है कि actually में चीज अच्छे से चलनी चाहिए तो मैं एक बार अपना ये project लियाते हैं और मैंने एक AI का भी video बनाया था तो मैंने अब अपना ये enable कर लिया है extension तो आप भी कर लीजेगा अगर है तो नहीं है तो कोई बात नहीं अरे कुछ project चल भी रहा है क्या हमारा अरे ये तो काफी time से चल रहा है इसका मतलब ठीक है तो ये हमने open करा और एक project बनाते हैं वो ये अपना npm create wheat at the rate wheat at the rate latest ठीक है जी latest project का नाम क्या रखें redux टूल किट यह रख लेते हैं नाम वैसे तो टूडू है यह भी टूडू भी रख लेता है ठीक है, हाँ, to do को भी complex बनाया जा सकता है, हाँ जी, to do बहुत complex बन सकता है, इसकी बात नहीं है, react आ गया, और ये javascript आ गया, cd, redux, toolkit, वैसे तो मैंने bun भी install करा है, अगर in case आपको पता हो तो, तो मैं यहाँ पे bun install लिखूं, या फिर मैं node install लिखूं, एक ही बात है अभी म है तो आप नोट इंस्टॉल भी करेंगे तो भी एक्जैक्टल यही होगा और बन इंस्टॉल करेंगे तो भी यही होगा अब एक एक्स्ट्रा फाइल जाती है बन लॉक भी और कुछ भी नहीं है फैंसी अब इसके बारे में हमें देखने ही जरूरत हैं ठीक है अब रिडक्स टूलकिट को यूज कैसे करें यह तो एक चिंताजनक बात है एक बार इसको ओपन करते हैं और एप जो जाते हैं पहले तो हम क्या करें सफाई करें सफाई जरूरी है है कि नहीं स्वच्च अभियान एडिट एप्पल एक एचवनी ले लेते हैं यहां पर लर्न अबाउट रीडक्स टूलकिट ठीक है जी सेव कर लिया और इसको रन करते हैं तो एनपीएम से भी रन कर सकते हो बन से भी कर सकते हो एनपीएम से ही कर देता हूं एनपीएम रन डेव अच्छा ठीक है Redux Toolkit तो आ गया पर use कैसे करना है बता सकते हो अरे documentation से पढ़ना है और क्या बात है और कहां से पढ़ेंगे Getting Started Tutorials में नहीं जाना अभी क्योंकि इसका tutorial थोड़ा सा complex है आपको confuse कर सकता है तो ये वाला वीडियो देखेगा तो ठीक है installation के अंदर बताया कि create a react app अब react app देखी अब आप official हो चुके react के अच्छे ग्याता हो चुके हैं तो आप चिंता नहीं करेंगे इस बात की कि next से बनाओ, wheat से बनाओ, parser से बनाओ, किस से बनाओ मैं बस बना लोगा अपनी react की app, आप मुझे बताओ करना क्या है, उसके बाद कहा है कि ठीक है app बना लो, existing app में कैसे install करना है, तो ये दो command इसने दी हैं, npm install redux toolkit और npm install react redux, दो क्यों use करना पड़ेगा, क्योंकि आपने ध्यान से नहीं सुना, अगर ध्यान से सुना होता, तो और इसको install कर देता है तो पहले तो अपना redux toolkit हाँ npm से करो, band से करो कोई फरक नहीं पड़ता, दोनों interchangeable है ठीक है, environment ही तो है, और क्या है ठीक है, run करके देख लेते हैं एक बार कि मामला ठीक है कि कुछ break-break कर दिया है अभी सही ठीक है, मामला अभी तक तो ठीक है चलिए, अब इसने क्या कहा है कि ठीक है आपको store configure करना पड़ेगा देखे, included के अंदर ही mostly काम लिख रखा है एक store आपको configure करना पड़ेगा उसके अंदर आपको actions बनाने पड़ेंगे, slice बनाना पड़ेगा, फिर async वगरा आपको setup करना है तो करिये, तो कर लीजे, हाँ मुझे पता है थोड़ा सा complex है, actually मैं इतना भी complex नहीं है, मैं आपको इसको basics से, actually मैं इसको simplify करके दिखाता हूँ, कि किस तरह से ये काम होता है, च कुछ लोग कहेंगे अपने फोल्डर के यहीं पे रखो, कुछ लोग कहेंगे स्टोर के फोल्डर के अंदर रखो, कुछ लोग कहेंगे एप के अंदर रखो, टोटली आपकी चॉइस है, इससे कोई फरक नहीं पड़ता है कि आप स्टोर को कहां रख रहे हैं. मैं एक फोल्डर बनाता हूँ, इस फोल्डर का नाम एप रख देता हूँ और इसके अंदर अपना स्टोर बना देता हूँ, अब स्टोर कैसे बनाओगे, कुछ भी नहीं, सिंपल सा काम करो, store.js, ठीक है, यह बन गया है आपका स्टोर, तो स सबसे पहली जो चीज करनी है वो आपको configure store लेके आना है क्योंकि वो ही एक method है जो की इससे काम करता है तो हम लेके आते है configure store redux toolkit से अब ये देखे कहां से आया है ये आपका core redux से आया है ना की react redux से ठीक है अब store बन गया है लेकिन ये properly तयार नहीं है अभी use case के लिए बट फिर भी हम इस method को use करते हुए एक variable export कर देते हैं export const stores का नाम दे देते हैं और store आएगा कहां से हमारे configure store से आएगा यह हमारा store है यह एक object ही लेता है अपने अंदर most of the चीजें यहाँ पर अपने आपने एक object ही लेगी पर क्या यह पूरी तरह से ready है नहीं यह ready नहीं है अभी इसलिए हम इसको save करके बस close कर देते हैं ठीक है दो line का code लिखा है कुछ complex थ नेक्स्ट स्टेप क्या होता है कि आप बनाते हो अपने reducers ठीक है यहाँ पे भी अगर आप देखोगे तो आपको यह कहा जाएगा कि आप अपना यह जो configure store है create यह configure store तो हमने कर लिया है अब आप बनाते हैं अपने reducer लेकिन Redux toolkit के अंदर जिस तरह से reducer बनता है वो थोड़ा तो folder बनाता हूँ एक नया, मैं इसको नाम देता हूँ, feature या फिर features दे देता हूँ, अब features के अंदर भी क्या है, अलग-अलग features हो सकते हैं, login feature हो सकता है, to do feature हो सकता है, product feature हो सकता है, काफी features हो सकते हैं, अभी मैं क्या करता हूँ, एक to do बना के देखते हैं basically, ताकि हमें actually में .js, अब देखिए इस file के पीछे हमने slice जो लगा है उसका कोई खास role है नहीं, इसको आप to do.js भी बोल सकते थे, but क्योंकि naming convention है, सबको पता रहे कि आपने Redux toolkit use करा है, बस इसलिए लिख रहे हैं, ठीक है, चलिया, अब इसके अंदर कैसे use करते हैं, देखिए सिर्फ आपको एक ही method चाहिए जो slice बना देगा, but हम दो use करेंगे, उसके पीछे reason भी आपको बताता हूँ, जो सबसे पहला method है, वो है create slice, अब ये create slice आएगा आपके पास, from redux, Redux JS Toolkit, अब method तो technically एक ही चीए, जिससे आपका काम हो जाएगा but क्योंकि मैं कुछ use करना चाहा रहा हूँ आपको अगर याद हो, तो हमने जो IDs ली थी, अपने to-do's के अंदर वो 1, 2, 3 ली थी पहले तो उसके बाद लगा कि 1, 2, 3 तो ठीक नहीं है तो हमने simply date कुछ arrays आते जाएंगे, कुछ values आते जाएंगे, तो इसलिए आपको एक nano id नाम से एक method provided होता है, यह क्या करता है, unique id generate करता है, हाँ जी literally बस इसका इतना ही काम है, और कुछ भी नहीं है, ठीक है, अब दूसरी चीज क्या है, आपको पता है इसके अंदर सबसे पहले important चीज क्य है तो हम उसका नाम देते हैं इनिशियल स्टेट अब इनिशियल स्टेट आपको क्या रखनी है टोटल आपके ऊपर है एरे भी हो सकती है ऑब्जेक्ट भी हो सकती है मैं इनिशियल स्टेट क्या रखता हूं एक ऑब्जेक्ट रखता हूं क्योंकि इसके बारे में पहला रखता हूं यहां पर एक सिंपल अपना टू डूस नाम से मेरी स्टेट है यह क्या है कुछ भी नहीं है हेलो वर्ल्ड रख देते हैं ठीक है इतने में कोई दिक्कत नहीं कोई दिक्कत नहीं है आप चाहो तो और वैल्यूज आपको लेनी है कंप्लीटेड फॉल्स वगरा जो कुछ रखना आप रखिए अब ये है मेरा पहला to do बट और भी properties हो सकती है वो सकता है आप authentication token रखना चाह रहे हैं ये और भी कुछ जो हम आगे रखेंगे ओविस्सी बाते आगे जाके और complex है आप आएगी बट आपने देखा ये कुछ है नहीं अब अकसर लोग क्या है इसको इतना complex बना देते है ना त अब हम आते हैं कि किस तरह से हम एक slice बनाएंगे, slice क्या है, almost एक reducer का ही बड़ा version है, और कुछ भी नहीं, अच्छा reducer क्या है, कुछ भी नहीं, functionality है, हाँ जी, बस, और कुछ है ही नहीं, तो हम क्या करते हैं, इसको export भी कर लेते हैं, क्योंकि इसको काम में लेना है हमें आगे ये लीजे create slice, ये क्या है, method है, ठीक है जी, method हो गया, इस method के अंदर आएगा क्या, हाँ, जादातर object से आएगे, तो ये लीजे object आगया बस, इसमें कोई घबराने आली बात थी, नहीं, कोई नहीं थी, अब क्या है, slices के नाम होते हैं, आपके उपर depend करता है, क्या नाम आप र ठीक है, तो इसका नाम मैंने रख दिया to do, अब क्योंकि इस string है, तो आपको भी अब तो पता लग रहा है कि अच्छा, string है, name important है property, but string तो to do हो, हितेश हो, सुपरमैन हो, चाय हो, क्या फरक पड़ता है, जो second चीज आप देते हो इस slice के अंदर, हर slice का एक initial state होता है, तो हाँ multiple मुझे ज़्यादा पसंद है कि मैं इसको अलग से डिकलेर करूँ तो ज़्यादा बहतर होता है, ठीक है, वो हमने कर लिया, अच्छा, अब जो सबसे important चीज आती है, जिसके लिए ही हमारा actually में store अभी तक incomplete है, वो है हमारे reducers, तो पहले reducers किसी और तरह से बनाया जाते थे, अ properties और function हाँ जी देखिए बताता हूँ तो properties और function कैसे property का नाम है मेरा add to do एड टू टू ठीक है यह मेरी है प्रॉपर्टी अब इस प्रॉपर्टी के अंदर आपको क्या लिखना होता है एक अपना फंक्शन अब फंक्शन हो सकता है आपने कहीं और डिक्लेयर कराओ जैसे सपोस करिए आपने फंक्शन कुछ यहां पर डिक्लेयर कराए यह डिक्लेयर कराए फंक्शन या फिर एरो फंक्शन जैसे भी आपने कराए तो आपने करा से हेलो और यह कि कोई दिक्कत वाली बात नहीं है अच्छा इसमें क्या है यह इस तरह से लिखा जाता है यह लीजिए तो एड टू बन गया है ठीक है जी अब इसी तरह से आप रिमूव टू बना लीजिए तो रिमूव टू डू और रिमूव टू डू बनाया और यह हमने काम लिख दिया यह लीजिए तो काम हो गया आपका कोई दिक्कत वाली बात ही नहीं है अब यहीं पर हमारा एक्शन लिमेंट चेंज आता है कॉन्टेक्स टीपीआ से कॉन्टेक्स टीपीआ लिखे आप इसी तरह लिख रहे थे हमेशा फंक्शन का डिक्लेरेशन कर रहे थे उसकी डेफिनेशन लिख रहे थे यहां ये syntax है ये इसी तरह से काम करते हैं जैसे use state याद रखते हैं use effect याद रखते हैं वैसे ही आपको हमेशा यहाँ पे दो चीजें मिलेगी notes में भी लिख लेना एक मिलेगा state और एक मिलेगा आपको action ठीक है इन दोनों का आपके पास हमेशा ही access रहेगा state तो आपको क्या है variable हमेशा access देगा कि अभी मेरी ये जो initial state है ना तो अभी उस state के अंदर क्या क्या values है उन सब का access आपको देगी ठीक है अब हो सकता है इसके अंदर 10 to do's गए वे हो, इस area के अंदर 5 to do's गए वे हो, एक भी नहीं हो, सारे remove कर दियो, तो अभी क्या situation है उसकी, वो hand to hand situation वाला काम state आपको देता है, actions क्या होते हैं, actions कुछ नहीं होते हैं, कि आपके पास कई बार हो सकता है कुछ values आए, अब जैसे remove, तो वो values कहां से मिलेगी, वो values action में से मिलती है, ठीक है, तो इतना जादा कुछ खास है नहीं, तो ठीक है, चलिए, अब क्या करना है हमें, कुछ नहीं, add to do करना है, तो मेरे पास, मेरे को पता है कि मेरे को to do तो लाना पड़ेगा, अब to do मेरे को मिलेगा कहां से, जैसे ID मिले ठीक है जी यह लीजिए कॉपी और यह लीजिए अलग लाइन में पेस्ट कर लें यह लीजिए पेस्ट यही काम करना है कर लीबरे से ज्यादा हो गए और इसके ओं एंटर मार के नई लाइन पर लियाते हैं यही काम करना था आईडी यूनिक होनी चाहिए और टेक्स्ट भी म तो हम nano id यूज़ कर लेते हैं, कैसे यूज़ करना है, कुछ भी नहीं है, बस आपको बोलना है nano id और ये लीजे method, that's it, ठीक है, ये कई बार होता है, जब इस तरह के आप AI बगरा यूज़ करते हैं, तो suggestion में इस तरह की problems आ जाती है, इसलिए beginners को मैं recommend नहीं करता, क्योंकि beginners को पता नहीं ना, कहां पे problem आ गई है, कहां नहीं आ गई है, तो बस इस ID के अंदर अब एक नई value चली गई है, नई string, अच्छे text कहां से लोगे, क्योंकि hello world तो सब में नहीं डालोगे, क्योंकि हो सकता है वो आपको कुछ बेज रहा हो, यह निकालेंगे हम हमारे action में से action के अंदर payload नाम से आप ले सकते हो और payload के अंदर आपको यह value मिल जाएगी अब payload को भी आप एक object बना सकते हो तो उसके अंदर dot properties access कर सकते हो payload अपने आप में एक object है तो उसके अंदर क्योंकि मैं payload dot text action dot payload लिख दो तो आप और भी extract कर सकते हो payload एक object है object में id आ सकता है तो बस यह हमारा काम हो गया, लेकिन यह तो आपने to do बनाया है, यह to do अभी state के अंदर थोड़ना गया है, क्योंकि initial state तो आपने बता दी, बट अभी state को update करना पड़ेगा न, अब यहाँ पे आती है सबसे अच्छी बात, कि इस state को पहले redux में जिस तरह से काम में लेते थे कि और भी वैल्यूज सकते तो इस टूडूस को मैं एक्सेस कर रहा हूं और इस टूडूस के अंदर क्या कर रहे हैं सीधा पर इसको हटाएं यह लीजिए एक बार इसको यह कॉमन नहीं चाहिए था वहापे क्योंकि यह टू डू बनाया ठीक है यह आगे वैल्यू तो हमारा एड टू डू वाला काम हो गया तो देखिए आपको यह पता लग गया कि अब मेरे को स्टेट कैसे एक्सेस लेना है और एक्शन के अब remove, remove तो मेरे साब से आप भी कर सकते हो, देखे remove है हमारा pure and pure revision, ठीक है, तो remove के अंदर क्या मिलेगा, जो method है, इसके पास किस-किस का access है, फटा-फट comments में लिख दो, पढ़ने भी आते हो, keyboard भी नहीं चलाना है, कैसे काम चलेगा आपका, तो state लीजे, और दूसरा क्या मिल और action के अंदर जो भी data pass हो रहा है, ठीक है, अब मुझे पता है remove करने के लिए, action में नोंने मुझे, एक id तो भेजा ही भेजा होगा, तो id अगर भेजा होगा, तो मुझे क्या करना है, filter लगा देते है method अपने to do's पे, और जो भी action.id है, अगर match हो जाता है हमारे to do id से, तो state.to do's, यह तो करना है, ठीक है, तो यह कैसे overwrite होगा, कुछ नहीं, अपना state.todos लो, और इसके उपर एक filter लगा दो, यह लीज़े, filter लगा दिया, अब filter के अंदर क्या होगा, हर एक value को access मिलेगा, हाँ जी बिलकुल मिलेगा, ठीक है, अब हर एक value को access लेंगे, तो क्या बोलेंगे उसको, तो टूडू बोल देते हैं, टूडू उसके अंदर जो भी है, अब यहाँ पे जाके क्या करना है, कुछ नहीं, आपका जो टूडू है, उसके पास एक ID होगी, हाँ जी उसको match कर लो, कि वो नहीं मिलना चाहिए, किस से, action के साथ आप जो payload भेज रह और automatically ID वो compare कर लेगा वहाँ पे, बस इतना ही काम है आपके पास, ठीक है, यह बड़ा ही basic सा statement है, हर जगे काम मिलोगे almost, कि भाई जो ID दे उसको match मत करो, बाकी सब को ले आओ, तो filter तो जो true values होती है उनको ही देता है, तो true values हमें सारे मिल जाएगी, अब आती है बात कि इसी तरह से आप और भी reducers add कर सकते हैं, और यहाँ पे आपका है assignment की add हो गया remove हो गया delete कैसे होगा update कैसे होगा simple सी बात है update में क्या करना पड़ेगा update में आपको action के अंदर id मिलेगी id से आप find करो उसको उसका जैसे आपको place find हो जाए तो उसको आप लो और उसके id as it is रहन दो बस उसका text value change कर दो तो property overwrite कर दो और delete भ ठीक है तो चलिए ये reducer वाला काम हो गया, अभी तक ये आपने पूरा to do slice as export कर दिया है, लेकिन ये इस तरह से export नहीं किया जाता है, actually मैं आपको दो part इसके export करने होता है, ये भी syntax है, इतना भी असान नहीं है reducer, हाँ steps हैं, ये मैं मानता हूँ, बट इतना complex नहीं है, अगर steps क्योंकि actually मेरी जो reducers है न, ये functionality add to do, remove to do, हम इसी के through ही हमेशा state को update करेंगे, तो ये functionality individually काम में आएगी, तो हम क्या करते हैं, इन functionality को export कर देते हैं, और इसको देंगे हम to do slice.actions, तो अब क्या होगा, इस actions में से value मिल जाएगी, हमें कौन-कौन सी value, दो ही तो लिखी हमने ये add to do ये individual functionality हमने export करेंगे क्योंकि ये हमारे components में हमें काम आएगा लेकिन अभी आपको याद हो तो हमारा ये जो store है अकेले घूम रहा है इस store को भी awareness चाहिए इन सारे reducers के बारे में अगर इसको awareness नहीं है तो इस store maintain नहीं कर पाएगा क्योंकि ये एक restrictive store है कि मैं value हर किसी से लेके update नहीं कर लेता हूँ मेरे अंदर जो जो आप reducer register करोगे मैं सिर्फ उनसे ही value लेके update करता हूँ तो इसलिए इसको सारे के सारे reducers का list चाहिए होता है तो यहाँ पे हमने बोला to do slice.reduce reducer, इसी तरह से अगर आप और भी reducer यह बनाते हो, या फिर to do slice की जैसे आप authentication slice या कुछ भी slice बनाते हो, आपको वो सारे reducer export करने ही पड़ेंगे और उसको यहाँ पे लेना ही पड़ेगा individual reducers को भी export करना पड़ेगा, और उनको भी ऐसे ही export करना पड़ेगा, same syntax, क्योंकि वो components में काम आएंगे, है ना तो अब चलते हैं हमारे store पे अब store के अंदर क्या कहानी है, store को कुछ नहीं, उस reducers की knowledge चाहिए थी तो अब क्या करते हैं, simple sauce को बोलते हैं कि हमारे जो to do reducer हैं, इनको ले आओ आप, एक directory back जाके, features के अंदर, to do के अंदर, to do slice हैं, यहां से ले आओ, ठीक है जी, ले तो आएंगे, अब यहाँ पे इसको रखना कैसे है, कुछ नहीं, इस object के अंदर key value डाल दो, key क्या क्या डालना है मेरे को, की reducer, मैं बताता हूँ कौन सा reducer है, वैसे तो आप reducer की पूरी list दे सकते हो object की, बट हमारे पास अभी एक ही है, आगे जाके हम और भी अब क्या है, actually मैं आपकी functionality आसान होगी, क्योंकि logic part तो आपने यही लिख दिया है, अब logic part हो सकता है, आपने किसी और file के अंदर लिखा हो, वहाँ से import करके, ये सब लिखने की जगे आप बस उसका नाम लिख रहे हैं, वो सब अलग कहानी है, बट ठीक है, काम तो हो रहा है, कि इस store के ने data भेजना कैसे है, और जो दूसरा हमारा है कि to do's की पूरी list है, या उसको delete करते हैं कि functionality है remove to do, वो ये बताएगा कि हमें data कैसे send करना है, तो लेना data और send करना data, दोनों हमें आ जाएगा, और इसी के लिए तो हमने actually में, अगर आपको याद हो तो, हमने जो यहाँ कि हाँ, दो ही चीजों के बारे में हम यहाँ पे सीखेंगे, वो है Use Selector और Use Dispatch, तो Store सीख चुके हैं, Reducer सीख चुके हैं, हम दो ही कहानी बाकी है, Use Selector, Use Dispatch, तो एक-एक करकन को देख लेंगे, Functionality पे हम जादा ध्यान देंगे, तो कभी देखिएगा, कि किस तरह से हमारा जो Original Redux है, ओके, तो हम क्या करते हैं यहाँ पर एक components बनाते हैं अब मैं किसी भी component में state का access ले सकता हूँ तो मुझे चिंता करने की इतनी जरूरत नहीं है तो यह बनाए हमने components दो component हमें चेहेंगे add to do और एक अपना simple to do's तो इसको बोलते हैं add to do.jsx of course क्योंकि jsx आएगा यह लीजे और अपने एक और component आएगा वो है अपना simple to do इसी के अंदर बाकी के to do's हम mention कर देंगे, to to do's.jsx, ये लीजे, इसके अंदर भी rfce कर देता है, ताकि react functional component, अच्छा अब जो add to do है न, उसके अंदर आएगा simple एक form, हाँ जी बस इससे ज़्यादा कुछ भी नहीं आएगा, direct मेरे notes से, इसके अंदर obvious ही बात एक on submit लगा हुआ है, जिसका नाम add to do handler लिखा हुआ है, तो इस method से add कर लेना, वो method क्या करता है वो हमें नहीं पता, वो हम बनाएंगे, अभी design करेंगे, input field है, जिसके अंदर कुछ यह already tailwind की classes है, tailwind तो हमने configure करी नहीं, अभी कर लेंगे, आपकी जो value है वो input से run हो रही है, और यह आपकी values on change से होके, set input में जा रही है, वो भी हम कर तो आपको कुछ ना कुछ event dispatch करना पड़ेगा बस इतना सा याद रखिए ठीक है तो आते हैं यहाँ पे function के अंदर सबसे पहले क्या करते हैं states बनाते हैं क्योंकि state का नाम input और set input रख रखा है तो उसी नाम से बना लेते हैं तो यह हो गया हमारे पास input यह हो गया set input और यह हो गया हमारा react use.state मलब react आपको यह पसंद नहीं आ रहा है परिशान होना तो यह लीजे use state ठीक है अब मैंने आपको बताया कि सबसे पहले क्या चाहिएगा एक डिस्पैच चाहिएगा अभी डिस्पैच आएगा कहां से डिस्पैच एक्चुली में यह जो चीजें ना यह तो प्यूर आपका रीडक्स है या रीडक्स टूलकिट बोल लीजिए यह जो चीजें ना यह रियक् अच्छीली में देखिए, इसलिए मैं कहता हूँ, कि अगर आप इस तरह के सॉफ्टवेर्स यूज़ कर रहे हैं, जो AI बेस है, वो कई बार हो सकता है आपको गलत चीज़े दे दे, तो आपको पता होना चाहिए अच्छीली में यूज़ क्या करना है, सजेशन देते हैं जब हाँ जी ठीक है चलिए अब इसको यूज कैसे करते हैं अरे बहुत ही आसान है एक लाइन का सिंटेक्स है इसको क्या करो सिंपली डिस्पैच यूज डिस्पैच बस हाँ जी बोला था ना इतना सा ये यूज डिस्पैच अच्छा अब डिस्पैच को किस तरह से यूज करते है एड टूडू हैंडलर और इस टूडू हैंडलर के साथ क्या करेंगे इसके पास आएगा एक इवेंट और यह लीजिए एरो फंक्शन सबसे पहला काम क्या करो उसको प्रिवेंट डिफॉर्ट कर दो क्योंकि फॉर्म डिरेक्टली सबमिट हो जाता है तो उसको बोलते हैं कि इवेंट डॉट प्रिवेंट डिफॉर्ट तो यह हमने बोला उसको प्रिवेंट डिफॉर्ट ठीक है अब दूसरी कि dispatch क्या करता है, dispatch एक reducer को use करते हुए store के अंदर changes करता है, इसलिए ये इस तरह से लिखावा है, dispatch एक reducer को use करते हुए store में value add करता है, हाँ मैं दुबारा बताऊंगा क्योंकि ये ही सबसे पहले miss होता है, dispatch reducer को use करते हुए store के अंदर values में changes करता है, ठीक है तो कर दीजे, य पर यह कोई method तो मेरे पास है ही नहीं यहाँ पे, अच्छा ऐसे हवा में नहीं आ जाता है method, इसलिए मैंने जब यह feature बनाया था to do slice का, मैंने इसलिए individually export किया था, ताकि मैं उस individual reducer को ले के आ पाँ, तो individual reducer को ले आते हैं, यह लीजे import कर लेते हैं, अपने कुछ values को, और उस हमें इसको actually मिलाना पड़ेगा proper जगह से..
slash features features के अंदर अभी मेरे को suggestion पे विश्वास कम है to do slash to do slice हाँ यहां से आएगा यहां से हमारे पास जो value आएगी वो क्या आएगी add to do और भी आ सकते है अभी हमारे पास add to do है अब dispatch के अंदर ही reducer को call करना पड़ता है तो यह add to do call करो add to do क्या है ठीक है अब add to do call कर सकते हैं पर अकेले कर सकते हैं क्या अब कर तो सकते हो, बट जो functionality आपने लिखी है, उस add to do के अंदर आप expect कर रहे हो, कि आप एक, ये रामारा add to do, उस add to do के अंदर आप एक action.payload भेजोगे, अच्छा पहले क्या होता था, ये action.payload वगरा ये सब manually लिखना पड़ता था, सिर्फ इस reducer को call करके, हाँ, कोई आपको action.payload वगरा, और इसी लिए Redux Toolkit बहतर approach है, क्योंकि यहाँ पे unnecessary boilerplate नहीं है, already आप देखने है कितना boilerplate code है, क्योंकि यह सिर्फ dispatch ही तो करना था, उसके लिए store बनाया, features बनाया, reducers बनाया था, but long application जो complex होती है, वहाँ पे यह काम में आता है, अब एक important चीज यहाँ पे पता है क्या है, लेकिन आपने जो input field बनाया ना, इस input field को आपने clean नहीं करा, तो उस फॉर्म को क्लिन करने के लिए आप यह सेट इनपुट यूज कर लो और उसका स्टेट वापिस से क्लिन कर दो जो भी यूजर ने डर्टी किया है तो यह सेट इनपुट हमने यूज करा और उसको क्लिन कर दिया पर सितना साइड काम है तो हमने देखा तो भी action.payload के अंदर वो payload object के अंदर सारी values है तो बस इतना ही साइट तो काम है ठीक है तो अभी हमारे पास क्या हो गया है यह use dispatch वाला काम तो हो गया है अब क्या बचा है काम use selector वाला अच्छा use selector कहाँ पे काम में आएगा देखिए आपने to do जब add करा है तब तो functionality काम में ले ली dispatch की क्योंकि एक action dispatch करना था लेकिन अब हम आते हैं एक अपनी functionality पे कि सारे to do's को list करना है, तो सारे to do's को list कैसे करोगे, हाँ ये तो बड़ी interesting बात है, और विसी बात है, एक बार अगर मुझे मिल जाए सारे to do's, तो मुझे इतना तो पता है, कि to do's की जो initial state रखी थी न, ये to do's, हाँ initial state object है, लेकिन जो to do's है, लेकिन loop मैं कहां से value लूँ, actually मैं store से, और, इसी दिन के लिए एक store बनाया जाता है कि सारी चीजे जो आपको चाहिए वो सब आपको store से मिल जाए अच्छा store से तो मिल जाएगी लेकिन store से लेंगे कैसे क्योंकि यहाँ पे तो हमने देखा अभी just कि आप तो सर अभी कह रहे थे कि यह जो slice वगर हमने बनाया है तो state के अंदर सारी value मिलती है तो state में मिलेगी value की store में मिलेगी देखिए values को access कैसे करता है वो गौर से हम उसको store बोलते हैं ठीक है तो तो देखिए सबसे पहले क्या करना पड़ेगा, use selector, ठीक है, यह बात तो आपने एकदम सही कही, कि use selector, और यह selector हमारा आता है, react redux, यह कहां से आ रहा है, इतनी जगे से तो नहीं आता है, कई बार ना, अलग अलग चीजें देता है, use, एक सेलेक्टर यह वाला हां रिएक्ट रिडक्स यह वाला चाहिए मैं रिएक्ट रिडक्स वाला अच्छा ठीक है लेकिन इतना तो ठीक है लेकिन आप डिलीट भी तो करोगे जो लिस्ट आएगी उसमें डिलीट का आइकन भी तो दोगे ताकि डिलीट है आज डिलीट आइकन में दूंगा इसका मतलब है कि मैं कोई एक्शन लेना चाहता हूं और कोई भी एक्शन लूंगा तो डिस्पैच करना पड़ेगा तो डिस्पैच लेने के लिए क्या कर सकते हैं दो तरीके नेक्स्ट लाइन में लिखो या फिर यहीं से ले यूज डिस्पैच है की बात है अगर डिस्पैच यूज करूंगा तो कोई ना कोई मेरे पास रिड्यूसर होगा वह रिड्यूसर लाना पड़ेगा रिड्यूसर कहां से मिलेगा मेरी स्लाइस में से ठीक है जी तो इंपोर्ट करते हैं हमारे कुछ रिड्यूसर है तो रिमूव टू लेव ठीक है जी अच्छा जी यह बात तो हो गई अब यह बताओ सबसे पहले कि मैं टूडोस कैसे लेकर आओ ठीक है, to do's लाने के लिए syntax समझना पड़ेगा कि use selector का syntax, dispatch का तो मुझे पता है, const dispatch equals to use dispatch, parenthesis, बस हो गया काम, देखे use selector भी इसी तरह से है, कि आप जैसे use selector का use करते हैं, तो ये सिर्फ एक method है, ठीक है, इस साथा कुछ भी नहीं है, बस advantage ये है कि इस method के अंदर आपको state का access वैल्यू ही एक ही है तो क्यों पेरेंथीसिस लगाना तो आप एडवांस हो चुके हैं तो स्टेट के अंदर आपको वैल्यूज मिल जाएगी और इस स्टेट के अंदर से आप यह जो पूरा स्टोर है इसके अंदर से जो भी चाहे वैल्यूज आप निकाल सकते हैं कौन सी वै हाँ, नाम उसका to do है, ये नाम कहाँ पे दिखाई देगा, वो भी मैं आपको बताऊंगा, but state.to do's, ये हमारे पास आ गया, इसको hold कर लें को variable के अंदर, ठीक है जी, hold कर लेता है, ये लीजे, बस, अब इसके अंदर क्या मिला है, क्योंकि to do's array है, तो अपने आप to do's अब क्य हां जी ठीक है तो देखा डिस्पी यूज सेलेक्टर और डिस्पैच इतना कुछ ज्यादा नहीं है अब क्योंकि आप डिस्पैच भी करोगे कोई ना कोई तो डिस्पैच बना लेते हैं यह लीजिए डिस्पैच बन गया अब डिस्पैच एक बार बन गया है तो हमारे पास मान लीजिए डिव है हमारे पास यह टूडूज है और इसको हम हटा लेते हैं एक बार ताकि हम इसको ऐसे ऐसे यूज कर लें ठीक है यह हमारे पास हो गया टूडू इसको हम रैप कर लेते ह अब क्या करना है, actually में अब हमें लगाना है एक simple सा loop और सारी values को इस तरह से लिखना है, अब किस तरह से इसको काम मिलेंगे, actually मैं अभी CSS अपने notes वगरा में से ले आऊंगा, लेकिन सबसे पहले हम क्या करता है, सिर्फ आपको मैं code javascript में बताता हूँ, क्या करो कुछ नहीं अब मुझे क्या करना है, मुझे कुछ नहीं करना, एक आपने जो div लेना है, ये li लेना है, जो भी आपको value लेनी है, वो ले लीज़े, तो ठीक है, मुझे एक li लेना है, जिसको मैं repeat करूँगा, तो key value लेनी पड़ेगी, key कैसे ले सकता हूँ, मुझे पता है to do के पास id है, जाता है इस एलाई के जस्ट आगे या कहीं पर भी आपको एक डिलीट बटन भी देना हो ठीक है तो डिलीट बटन देने के पीछे इतना कोई रॉकेट साइंस है नहीं यह लीजिए एक बटन दे देते हम यह लीजिए बटन आपके पास आ गया अब क्योंकि रखते हो तो एलाई के अंदर डाल देते इस बटन को ठीक है और इसको नाम दे दिया हमने एक्स अभी मैं और सीएसस यूज करने के लिए कुछ नहीं, आपको इस बटन पे on click value add करनी है, ये लीजे on click, ठीक है, ये हमारी हो गई on click, और ये लीजे on click, अब इस on click के अंदर काम क्या करना है, on click, हाँ जी अभी ठीक है, तो on click के अंदर क्या करना है हमें काम, कुछ भी नहीं करना, क्योंकि हमें dispatch call क अब dispatch क्योंकि एक method है और मुझे इस तरह से call करना है, तो मैं इस तरह से तो call नहीं कर सकता, क्योंकि यहाँ पे तो सिर्फ reference देना अलाव हुए, यह तो अलाव ही नहीं है, तो on click में आप एक call back fire कर सकते हो, जब भी ऐसे कोई parameters वगरा pass करने हो method में, तब हम ज़ाधातर call back ही use क और dispatch के अंदर हमने क्या करा, ये method है, ठीक है, इस method के अंदर एक remove to do आ गया, अब इस remove to do के अंदर क्या value देनी है, वो to do की value, वो id जो आपको remove करनी है, तो मैंने क्या बोला, ये लो individual to do, ये लो id access हो गई, तो actually में काम तो इतना ही है, है ना, अब इसको आप थोड़ा सा fancy बना लो, वो कर लो, वो सब आपके उपर है, मैं थोड़ा सा fancy इसको बना भी देता हूँ actually मैं, क्योंकि notes में मेरे पास है वो, but काम तो इतना ही है, functionality यही है, अब functionality को आप थोड़ा सा अच्छे से लिखो, थोड़ा CSS वगरा के साथ, तो हा बट अब आपको समझ में आने लग गया कि अच्छा ठीक है इसमें इतना कुछ load है नहीं एक बार setup में time लगता है store बनाने में reducers बनाने में slice बनाने में उसके बाद तो क्या है access करना है कुछ भी तो use selector से access कर लूँगा dispatch करना है कुछ भी या कुछ functionality run करनी है तो मैं इस तरह स तो कोई दिक्कत वाली बात नहीं अब पहले हम देखते हैं कि अक्शली में क्या क्या मिस्टेक हुई क्योंकि वादा टाइपोज हुए होंगे तो सबसे पहले तो हम क्या करते हैं इसके पीछे जाते हैं और अपना टेल विन इंस्टॉल कर लेते हैं टेल विन वाले पेज पर हो सकता कुछ दिनों में एनपीएम की जगह सब बन हो जाए तो थोड़ा सा फास्ट हो जाएगा मामला जितना फास्ट उतना टूटोरियल शॉर्ट उतना ज्यादा समझाने पर फोकस और यह हमारे सोर्स हो गए और यहाँ पर टेलविन कॉन्फिग यह कॉन्टेंट हमने चें कि वही हम चेंज करते हैं मोस्टली यह लीजिए वैल्यूज आ गई है अभी देखते हैं इसको रन करके कि कितनी क्या-क्या मिस्टेक है कहां-कहां एरर्स है एंड पेम रन डेव और इसको ओपन करते हैं लर्न अबॉट रीडक्स टूलकिट अच्छा प्रॉब्लम तो यह है कि एक स्टेप जो हमारा मेन स्टेप था वह हमारा रह गया है कि यह सारा काम तो आपने कर दिया है लेकिन यह सब काम यूज तो किया है नहीं कहीं पर भी कि हां सब इंडिविजुअल तो बना दिया है अब देखें यहाँ पे main.jsx भी है और app.jsx भी है, मैं आपको बता देता हूँ कैसे कैसे काम मिलेंगे और कैसे कैसे काम कर सकते हैं, अलग-लग method है वैसे तो, आप चाहें तो जो भी यूज़ करना चाहें, सबसे पहला तो मैं जाओंगा app.js में, तो learn about redux toolkit, यहाँ पे तो माम कि ठीक है ये सब तो remove हो जाएंगे कोई दिक्कत वाली बात नहीं है लेकिन हितेश जो हमने पहले जो context API ली थी उसके अंदर यहाँ ने एक wrapper लगाया था provider वाला तो यहाँ पे वो सब नहीं लगता क्या लगता है यहाँ पे भी लगता है लेकिन आप कई बार देखेंगे कि इसको app.jsx की जगे कई बार main.jsx में भी लगा दिया जाता है अब कोई problem वाली बात नहीं है, end of the day बात यह है कि जितने भी components हैं आपके वो सब उसके अंदर wrap हो जाए, अब top level पे हो, second level पे हो, आपको जहां ठीक लगे वो कर लीजे, कोई दिक्कत वाली बात नहीं है अच्छा, अब important चीज क्या है चाहिए होती है, आपको provider, ठीक है react redux से मिलेगा, और एक चाहिए होता है store, store को लाने का कोई magical तरीका नहीं है, store को import ही किया जाता है, और इसी वज़े से हमने app को export किया तो अब आपको समझ में आ रहा है और main.jsx में जाते हैं यही कर लेते हैं तो सबसे पहले तो चीज़े provider तो हम लेके आते हैं import provider और react-redux वाला provider आ गया ठीक है दूसरा आएगा store अब store को हमने default export किया नहीं है तो ऐसे ही लाना पड़ेगा ये लीजे store और ये store आएगा हमारा app के अंदर store से lower में export किया था न एक बार चेक कर लें और हाँ जी lower में किया था तो प्रोवाइडर आ गया है और स्टोर आ गया अब इसको यूज कैसे करना है एक लाइन का सिंटैक्स है देखिए मुझे कोई स्ट्रिक्ट मोड में इसको लाने का कोई शॉक है नहीं आपको मन करे करिए मैं यहीं पर डारेक्टली रैप कर देता हूं यह रेप प्रोवाइ� तो बस इतना सा काम है तो एक बार यह हो गया तो अब आप देखोगे कि हाँ अजीब सा दिख रहा है थोड़ा थोड़ा ठीक कर लेते हैं इसको immediate basis पे जादा तो नहीं करेंगे बट ठीक है थोड़ा तो अब बीजी डेश ग्रे 500 भी चलेगा ठीक है थोड़ा तो आसान है आप एक्चुली देखने में तो देखिए हेलो वर्ल्ड हमारा आ गया है यहां पर टूडूस करते हैं तो लर्न रीडक्स और इसको ऐड करके देखते हैं तो हमारा रीडक्स ऐड गया है अच्छा हेलो वर्ल्ड को डिलीट करते हैं ठीक है काफी इंट्रस्टिंग बातें कि एक बार में चल रहा है यूजिली पोकोड कभी एक बार में नहीं चलता है ठीक है और इसके अंदर लिखते हैं चाय और इस बार तो Redux हो गया है, चाय और Redux, तो यह हमने आड़ कर लिया, अच्छा अब interesting बात क्या है, सबसे ज़रूरी बात वो यह है, कि right click करिए, और आपके Redux Dev Tools हैं यहाँ पे, जहाँ पे आपका मन करे, आप open करिए, आप चाहें तो इसको inspect में भी automatically आ जाता है, inspect पे click करिए, औ ऑनलाइन क्लासेस वगरा लेते हो तो दिखता नहीं है उसमें, आप 4K में देखिएगा, अब देखिए सबसे इंटरस्टिंग चीज, सबसे इंपोर्टन बात यह है कि आपके पास यहाँ पर स्टेट है, है न, इसी के लिए हम कह रहे थे, स्टोर और स्टेट जो हम कह रहे थ टेक्स्ट भी हमें मिल रहा है इस तरह से और properties होती तो और values भी मिल जाती है बट मैं देख पा रहा हूँ उसका पूरा का पूरा access ठीक है इसके बाद आप यहाँ पे actions भी देख सकते हैं कि किस type के actions है payload के अंदर क्या value जा रही है क्या आ रही है तो type क्या है to do slash add to do क्यों है यह features के अंदर to do में तो जो मैंने कहा आपसे कि actually मैं values कैसे लेनी है action.payload तो यह मैंने हवा में नहीं करा यह action.payload यहां से वो value हम ले रहे हैं अब समझ में आया थोड़ा थोड़ा काहनी अच्छा आप देखे interesting बात क्या है आप इसमें कि कहां से values क्या हो रही है कुछ problem है तो यह बड़ा stack frames ना बहुत अच्छी बनाता complex होते रहते हैं अब जितना आपको javascript का knowledge उतना आपका और in-depth क्योंकि ये function अपने आप call नहीं हो रहे हैं इनको apply लगा के call किया जा रहा है arguments pass किया जा रहा है तो जितना मैंने आपको JavaScript में पढ़ाया था वो इसलिए in-depth पढ़ाया था कि वहाँ पे सब चीजे use होती हैं अब एक और चीज ये तो state हमारे पास है लेकिन आप सबसे interesting चीज क्या देखेंगे ये एक state की bar ये हाँ Redux Toolkit में मिलता है तो ये मुझे पूरा एक process बताता है कि कैसे timeline change हुई उस पूरी application की क्या क्या उसके साथ interaction हुआ और किस interaction पे कितना उसका लॉग हुआ, मॉनिटर्स, उसका नेटवर्क कंडीशन क्या है, कौन सा वाला मेरा जो रेडूसर है, वो जादा टाइम कंजूमिंग है, जब मैं डेटाबेस की रिक्वेस्ट ले रहा हूँ, ये सारा बड़ा इंटरस्टिंग यहाँ पर मिलता है आपको, उसके बाद एक remove to do call हुआ, कि फिर मेरी application इस state में आई, अब live, 2x आपको इसको replay करके देखना है और भी बहुत options है actually मैं सारे options तो देखी अभी discuss करना थोड़ा सा difficult है लेकिन आप बहुत कुछ यहाँ पे देख सकते हैं जैसे से आप click करेंगे एक एक value अपने हाप में यह एक बहुत बड़ा वीडियो बन सकता है अभी तो आपके actions call हुए action के अंदर एक key है सिर्फ payload आया कितना और भी values आई तो देखा तो काफी कुछ जा सकता है यह भी बता रहा है आपको react tweet है कौन सा वाला क्या instance है tweet भी कर सकते हैं आप चाहे तो और और भी settings आप change कर सकते हैं, remote connections लेना है, local custom server, और मतलब बहुत सारा है, theme वगरा, state, tree, कैसे आपको देखना है, तो हाँ, मतलब मामला तो काफी है, complex किया जा सकता है, करेंगे नहीं पर, ठीक है, ये performance वगरा, क्योंकि अपने आप में crash course बन सकता है, ये chrome के जितने भी performance वगरा, network ये अपने आप में बड़ी interesting चीज़े हैं, free time में ये मेरा सबसे best time pass है देखने का, कि कौन सी, YouTube क्या क्या कर रहा है behind the scene, उसकी performance कैसे हो रही है, पर engineering side में fun लेते हैं हम भी अपना, पर ठीक है, मज़ा आता है, चलिए, अब आपका ये हो गया है पूरा का पूरा, एक बार मैं आपको summary दूँगा, क्योंकि देखिए, काफी बड़ा video है ये, तो भी मैं तो दूँगा अपना 100%, तो चलिए, अब आपको मैं बताता हूँ एक बार पूरी समरी की कहां से कैसे कहानी होती है, जिन्नोंने notes नहीं लिखे, वो notes लिखते जाएगा, और pause करते जाएगा, देखिए, Redux Toolkit की history पे तो हम नहीं जाएंगे, इतनी सी कहानी बस यह है, कि Redux एक अलग चीज़ है, और React Redux जो हमारी पुरानी कहावतें जिनको मैं बोलता हूँ, कि never mutate your state, react जब भी पढ़ोगे ये सुनोगे, इन सब की मुझे Redux Toolkit में जरूरत नहीं, क्योंकि ये काम automatically होते हैं, behind the scene, अभी हमने state में देखा, वो जो state थी न, कि हर बार आपको एक पूरा replay दिख रहा है, अब मेरे एलसीओ स्टार्टअप में जहां पर हमने एक्चली में दो स्टोर रखे थे बिल्कुल अगेंस्ट है बिल्कुल अगेंस्ट है लेकिन हमारी एप्लीकेशन इतनी बड़ी थी मिलियन्स में यूजर थे कि हमें ऐसा करना पड़ा तो एक्सेप्शन सब जगह है अच् configure store चाहिए जिससे आपका store configure हो जाता है जिसके अंदर object है अभी हमारे पास एक ही key value property है multiple भी हो सकती है आगे जाके देखेंगे लेकिन अब next step क्योंकि आपको इसके अंदर सारे reducer introduce करना है क्योंकि store के अंदर जब भी value update होगी वो हर तरह से value update नहीं लेता है कब भी नहीं लेता है ये data flow ही नहीं है flux में बताया था ना data flow तो data flow ही नहीं है data flow के लिए उसको awareness चाहिए कि मुझे बताओ कि सारे reducer कहां पे है तो इसके लिए इसको reducer बताने पड़ेंगे, अब reducer तो बनाये नहीं है, तो इसलिए मैं गया feature के अंदर to do के अंदर to do slice, अब ये थोड़ा सा syntax है documentation में कि हम features को slice बोलते हैं, आपका मन करे बोले, मन करे मत बोले, आपका मन करे इसको superman बोलना है, तो superman बोलो, कोई नहीं रो आपका नेम चाहिए होता है एक उसकी इनिशल स्टेट और एक रिड्यूसर्स की पूरी लिस्ट चाहिए होती है जो जो काम करने वाले हो तो सबसे पहले इनिशल स्टेट बनाई कि बाई डिफॉल्ड कैसा होना चाहिए हो सकता है टू डू एक एमटी हम जाते हैं इसके अंदर, Redux के अंदर, और हमारा जो, काफी values change हो गई है, actions में जाते हैं, काफी zoom in हो गया है यह तो, ठीक है जी, तो यह रहा हमारा to do's, और इसका नाम जो है actually मैं, init state का, ओके, यह रहे हमारे, कहाँ पे चले गई values, थोड़ा सा इसको reset करना पड़ेगा, हाँ जी यह री values, तो यह जो हमारा state है, इसके अंदर इस to do's को बोल रहे हैं, तो इस पूरे का नाम actually में अभी हमारे पास to do है, तो आगे जाके भी आप देखोगे, और भी multiple होगी, तो मैं बताओंगा, अच्छा, तो वापिस आते हैं, कई आगे जाके हम जब complex project बनाएंगे तो इन functions को हम एक separate file में लिखेंगे import करके लाएंगे और यहाँ पे नाम लिख देंगे यह तो कोई बड़ा काम है नहीं कहीं पे पे लिखो उनको दो चीज़ों का access आपको मिलता है यहाँ पे एक state मिलता है और एक action मिलता है state के अंदर आपको updated state value in the store मिलती है और action के अंदर आपको क्या मिलता है action.payload एक to do बनाया और action payload में से to do की value निकाल ली जो भी text था ID मैंने nano ID से बना ली, अब मुझे पता है state का access है ही, तो state के अंदर push कर दो, हाँ पहले क्या होता था, पहले ऐसे नहीं होता था, पहले state से मैं सारे के सार��� arrays निकालता, उनको spread करता, फिर अपनी value डालता, और फिर मैं करता, context API में मैं ऐसे करता हूँ, क्योंकि वहाँ पे state preserve नह इसलिए अच्छा लगता है, तो मैंने लगा है add to do, remove to do, अब update वाली functionality आप करोगे, ठीक है, सबसे easy क्या रहेगा update करने के लिए, update करने के लिए सबसे easy रहेगा, कि यहाँ पर एक button लगाओ, जैसे update करना है, वो automatically load हो जाए यहाँ पर, और फिर यह add की जगे हो जाए update, यह बड़ा अच्छा functionality, जिसकी भी हो जाए वो discord पे पहुंच जाना, और discord का आपको link पता ही है, hitesh.ai slash discord, पहुंच जाना, ठीक है, अब हमें क्या करना है, export करना है, export में हमें क्या चाहिए होता है, एक तो individual functionality, अगर यहाँ पे 10 आपके reducers हैं, तो 10 reducers export करने पड़ेंगे, क्यो मेन सोर्स एक्सपोर्ट करना, ये मेन सोर्स इसलिए एक्सपोर्ट कर रहे हैं क्योंकि हमें इसको काम में लेना है अपने स्टेट के अंदर, अपने स्टोर के अंदर, ठीक है, तो सबसे पहले मैं भाग के गया अपने स्टोर के और उसको बोला कि देखे जी ये है रेडूसर क तो आपने dispatch करी, और आपके पास क्या है, जब भी dispatch करनी है तो कुछ नहीं, यह method ही तो है, हाँ method ही है, इस dispatch के अंदर जो भी आपका reducer है, हाँ reducer import करना मत बूलना, तो आपने reducer import किया, और dispatch के थरू उस reducer को भेज दिया, ठीक है, ओके, तो यह वाला काम आपके पास हो गया ह तो ये बड़ा basic था, dispatch समझ में आ गया, अब values लेनी कैसे है, लेनी के लिए तो बहुत आसान है, आपके पास selector है, values select कर लो, तो ये हमने select किया, select के अंदर बस थोड़ा सा syntax ये different था, है ये भी method ही, use dispatch की तरह, पर क्योंकि values select करनी है, तो कहीं से तो select करोगे न, हवा में थोड और उसके अंदर से जो भी pick करना है वो pick कर लो, अब हो सकता है state के अंदर आपके पास to do's हो, auth हो, products हो, categories हो, आगे जाके बहुत बड़े बड़े stores बनते हैं आपके पास, तो उसमें काफी values होती रहती है, तो आपको जो भी चीज़ वो particularly pick करके, variable में ले लो, अब variable में आ गई एक बार value, उसके बाद तो pure javascript है, उसके बाद कोई redux ना कोई react, अमारी classic vanilla javascript, और values को display कर दो, एक remove to do भी कर लेते हैं, अब remove to do करा, तो remove to do क्या है, action लेना है, है न, कुछ values भेजनी है, भेजते टाइम क्या होगा, use dispatch use होगा, use dispatch use होके क्या होगा, आपको ID भेजनी पड़ेगी, तो जब loop लगा ही रहे हैं, एक एक individual access है ही हमारे पास, key में भी तो डाली रहे हैं, तो उसम है ठीक है तो रीडक्स टूलकिट प्रोजेक्ट और लोग कहते हैं कि टू बड़ा बेसिक होता है कभी आइए मिली हमसे टू बेसिक होता है तो ठीक है अरे स्टेज नहीं करा वापस से ठीक है स्टेज कर देते हैं कमेंट कर देते हैं और पुष्ट कर देते हैं ओके जी चलिए यह तो काम हो गया आपका और बड़े अच्छे से हो गया तो जितना अच्छे से एक बात बहुत दूर तक भागते हुए देखा है और Redux Toolkit तो हवा भी नहीं लग रही है जितने अच्छे से आपको समझ में आ गया है न यहाँ पे उतना Redux easy नहीं है complex है लेकिन जिस तरह से flow बनाया गया था इस पूरे example का वो बहुत interesting है हमें भी काफी दिन लगे दिन नहीं weeks लगे थे और जब पहली बार class में deliver किया था उसे दिन students fan हो गये थे कि यह है असली कस अभी deliver हुआ है क्योंकि complex तो कोई भी बना देता है चीज़े हैं already complex उनको आसान बनाने के लिए मेहनत लगती है support बनाये रखेगा target पूरा कीजेगा इस comment के अंदर भी इस comment section के अंदर भी target बढ़ा दें थोड़ा अभी तक अगर देख रहे हो तो काफी complex है हजार comments तो करी देना दोस्तों से करवा देना अलग account से कर देना पर हजार complete कर देना चलिए हजार complete होंगे उसके बाद