Up next in 10
Updating state from a different component in Redux _ Complete React Course in Hindi #78
1K views
Feb 11, 2024
In the 78th episode of the "Complete React Course in Hindi," the tutorial tackles the challenge of updating state from a different component in Redux within the iNotebook project. This video provides a practical guide on implementing mechanisms to modify the state stored in the centralized Redux store from a component that is not directly connected to it. The instructor walks viewers through the process of dispatching actions, updating the state, and ensuring seamless synchronization between components. Whether you're a React developer seeking to master Redux state updates or a learner interested in efficient state management across components, this tutorial offers valuable insights into updating state from a different component in the iNotebook application.
View Video Transcript
0:00
पिछले वीडियो में हम लोगों ने देखा था कि किस तरह से हम लोग एक स्टेट को रीड कर सकते है�
0:04
और उसके लिए हमने यूस् किया था यूस सेलेक्टर होग ठीक है और यहां पर हमने स्टेट को रीड किया था ठीक ह�
0:10
अब मैं आपको क्या बताऊंगा कि किस तरह से आप लोग स्टेट को रीड कर सकते हैं और स्टेट को रीड करने के लिए आपको चाहिए होगा रिडूसर और रिडूसर को काम करवाने के लिए आपको चाहिए होगा एकशन क्रेटर ठीक है और यह बाते आप लोग को लग रह�
0:40
तो मैं क्या करूँगा यापर सबसे पहले तो मैं आपको बताऊंगा वो कौन सा हुक है जो कि डिस्पाच करने के लिए आएक्शन को आपको यूज करन�
0:47
वो है यूज डिस्पाच होगा तो मैं आपर कौन सा डिस्पाच इसे गए रहा है तो यूज डिस्पाच यूज करूँगा तीक है इसक�
0:53
इंपोर्ट भी करना पड़ेगा आपको तीक है अब यूज डिस्पाच को मैं क्या करूँगा यापर इंपोर्ट करूँगा तीक है इंपोर्ट यूज डिस्पा�
1:00
तीक है जो मैंने react redux से जो एंपोर्ट कर लिया है इसके बा�
1:03
मैं bind action creators को इंपोर्ट करूँगा from redux यह मैं भी बताता हू�
1:07
आपलोगो क्या करेगा ठीक है पूरी काहणी बताऊंगा क्या करेगा ये bind action creators ठीक है और मैं क्या करूँगा यापर जो हमार�
1:14
action creators है न अगर आपलोगो याद होतो है action creator action creator from redux नहीं हमारा action creators
1:22
action creators मैंने action creators को export किया था if I'm not
1:27
wrong from action creators sorry from state मैंने action creators को export
1:33
किया था star as action creators तो ये import क्यों नहीं हो रहा है ठीक ह�
1:39
action creators from मैं इसको manual लिग रहता हूँ from dot slash state ठीक है state के अंदर index ठीक है तो मैंन�
1:51
index के अंदर इस चीज़ को डाला होता है dispatch is assigned but not used ठीक है भी इसको use करेंगे अब मैं आपको एक चीज़ और बताता हू�
1:57
मैं यहाँ पर क्या करूँगा abind action creator क्यों import किया और action creator क्यों import किया तो समझ में आता है कि इसमें सारे के सार�
2:04
हमारे action creators हैं जो कि मैं यहां use कर सकता हूँ ठीक है इसलिए मैंने export करे थे यहां से ताकि मेरे state के अंद�
2:10
जो index है उसको मैं यहां पर import करूँ और सारे action creators होके वो तो हमने इस्तेमाल कर लिया है ठीक है लेकिन हम क्य�
2:30
करेंगे कि इन buttons को on click देंगे ठीक है यानि कि इन प�
2:34
अगर click होता है तो मुझे कुछ करना है ठीक है तो मैं सबसे पहले आपलोको एक तरीका बताऊंगा जो कि बिना bind action creators क�
2:40
देख लेते हैं इसको मैं कर दूँगा comment out ठीक है मैं आपर क्या लिखोंगा dispatch ठीक है dispatch एक function है ठीक है औ�
2:46
dispatch के अंदर मैं लेकर आउंगा action creators को और मैं लिखोंग�
2:50
action creators.deposit money ठीक है अब यह करने से बहुत एक चीज�
2:54
और बताऊंगा आपलोको action creators क्या है ठीक है action creators सबसे पहले दिखाता हूँ क्या है अपको अपने state क�
2:59
index.js में जिसको मैंने action creators लिखोंगा यह चीज़ import हो रही है action creators के अंदर जो index.js है ठीक है इसक�
3:05
अंदर दो functions है एक deposit money एक withdrawal money ठीक ह�
3:09
मैं इसका deposit money भी उसकर सकता हूँ withdrawal money भी ठीक है तो मैं लिखसकता हूँ action creator.deposit money या withdrawal money
3:15
deposit money क्या करता है deposit money क्या लेता है just amount लेता है और इसको deposit कर देता है तो मैं आपर क्या कर सकता हूँ इसको amount दे सकता हू�
3:21
सौर पे ठीक है और मैं इसको withdrawal money कहूँगा अक्शिलि क्योंकि यह विट्ड्रॉब कर दूँगा ठीक है और नीचे एक withdrawal money ठीक ह�
3:28
आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लिए आपके लि�
3:59
और यह मैंने console भी खोला प्लस माइनस पर क्लिक किया कुछ भी नहीं हुआ और एक गलती तो मुझे आवर दिख गई अपन�
4:04
जो की यह है कि मुझे इसको क्योंकि इसमें आर्गुमेंटस है फंक्चन में मैं इसको डेरेक्ली काल नहीं कर सकत�
4:08
तो मुझे इसको पर पड़ेगा आर्रो फंक्चन नामक हातियार ठीक है तो मुझे आर्रो फंक्चन इसकरना पड़ेग�
4:16
क्यों इसकरना पड़ेगा यह तो react का बेसिक है मैंने बता रहा था अलड़ि कि जब भ�
4:20
आर्रो फंक्चन के अंदर कॉल करना है फंक्चन को देखते हैं कि यह करने से क्या होता ह�
4:26
अब देखो यहाँ पर प्लस पर मैं क्लिक कर रहा हूँ तो मेरा बैलनस पर अपडेट हो रहा ह�
4:30
माइनस पर क्लिक कर रहा हूँ तो मेरा बैलनस अपडेट हो रहा है तो मेरा बैलनस मुझे बालूम ह�
4:34
क्यूँकि मैंने कोई ऐसा चेक नहीं लगाया कि यह नगडिब में ना जाए तो प्लस पर मैं क्लिक कर रहा हूँ देखो सौसे यह अपडेट हो रहा ह�
4:38
और माइनस पर क्लिक कर रहा हूँ तो यह यहाँ पर माइनस पर यह हो रहा ह�
4:42
तो हमारी आपलिकेशन अभी ठीक था काम कर रही है अब मैं आपको बताऊंग�
4:46
बाइंड एक्शन क्रेटर का क्या काम है क्या रॉल है और क्यों हम लोग बाइंड एक्शन क्रेटर को यूस्ट करेंग�
4:52
देखो यार अभी मैं यह जो लिख रहा हूँ यह बहुत बहुत कम्बरसम हो जाना है ठीक ह�
4:56
dispatch फिर action creators फिर dot, withdraw नहीं यार थोड़ा सा यह complicated हो जाना ह�
5:03
मैं क्या करूँगा बाइंड एक्शन क्रेटर का यूस्ट करूँगा और मैं लिखूंगा const actions is equal to
5:09
और मैं लिखूंगा bind action creators इसको दूंगा मैं action creators दूसरा argument दूंग�
5:15
dispatch और यह बहुत बढ़िया जादू करेगा मेरे लिए पता है क्या करेगा इसके अंदर सारे के सार�
5:20
मेथेट्स है मेरे deposit money भी है withdrawal money भी है तो मैं क्या करूँग�
5:24
actions is equal to ना लिखकर मैं लिखूंगा deposit money और withdrawal money बड उससे भी पहल�
5:30
जरा आपको समझ में आए इसलिए मैं जरा actions लिखके आपको दिखा देता हूँ अब मुझे यह करने क�
5:34
जरूरत नहीं है जहां मैं यह कर रहा था ctrl d to replicate, ctrl slash to comment ठीक ह�
5:41
यह जहां पर मैं कर रहा था button class name is equal to यह, onclick is equal to य�
5:45
यह चीज मैं कर रहा था इससे वड़िया मैं क्या कर सकता हूँ कि सिर्फ मैं withdrawal money लिख सकता हू�
5:51
मेरे पास withdrawal money function आ गया है ठीक है मैं सिर्फ withdrawal money लिख सकता हूँ कुछ इस तढ़ा स�
5:56
और deposit money भी लिख सकता हूँ कुछ इस तढ़ा से अभी तो आपको यह बहुत जाना बड़ी डिल नहीं लग रही ह�
6:02
कि आपको लगता है क्या यार इतना बचाने के लिए किया बट अगर मुझे withdrawal money दस बार उसकरना ह�
6:07
पड़ा थोड़ न लिखूंगा बार बार कोई तो इसलिए bind action creator जूसद होता है अगर आप इस पर hover करें तो यह बताएगा आपक�
6:11
turns an object whose values are action creators into an object with the same keys
6:15
but with every function wrapped into a dispatch call टीक है तो सारे के सारे जो आपके method है�
6:22
वो dispatch call में आटूमाटिकली आपके लग जाएगे पर जावस्कर्ट में destructuring नाम की चीज उती ह�
6:39
उसको हम स्थिमार करें यहां पर कुछ जोल हो गया है हाँ ठीक है एक bracket missing थ�
6:44
क्या application काम कर रही है जी बिलकुल कर रही है क्या console में कोई error ह�
6:50
बिलकुल भी नहीं कोई error नहीं है ठीक है और यह करने के साथ सा�
6:55
यह application तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तर�
7:25
तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तर�
7:55
तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तरह तर�
8:25
आप चाहते हो ये सारा का सारा काम कैसे हो रहा है अभी तक जो हमने किया वो मैं आपको बताओ अगली वीडियो में एकस्प्लेइन करता हुआ स्टेब बैस टे�
8:32
पहले हमने यह किया फिर यह किया फिर यह किया थोड़ा स्लोली स्लोली स्लोली स्लोली तो आप मुझे बताओ कॉमेंट में मैं ज़रूर एक वीडियो बनाओंगा जिसमें मैं पूरा इस आपलिकेशन को समराइज करूँग�
8:40
कि आप देखो पहले हमने यह किया फिर यह किया यह इसलिए किया एक्शन केटर यह है इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इसलिए इ�
9:13
बालेंस वालेंस इस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालें�
9:43
वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस वालेंस व�
10:13
पूरा का पूरा सेट अप कर लिया फिर आपको सिर्फ अपनी आप्लिकेशन में फोकॉस करना है इस फोल्डर को खोल के ही नी देखना है ठीक है आईडेली आप इसको खोल के ही नी देखोगे आप सिर्फ यहाँ पर यूज़ सेलेक्टर यूज़ डिसपाच को यूज़ �
10:43
आपको कैसा लगा अगर आपलोगोन यहां तक देखा तो सो अबीगे इस वीडियो पर इतना है गएज तानके आप बहुत बहुत गएज पर वाचिनग इस वीडियो और मैं आपको पर लगा जाने के लि�