Up next in 10
Creating a Redux Store _ Complete React Course in Hindi #76
193 views
Feb 11, 2024
In the 76th episode of the "Complete React Course in Hindi," the tutorial focuses on the implementation of a Redux store within the iNotebook project. This video provides a step-by-step guide on creating a centralized Redux store, which acts as the single source of truth for the application's state. The instructor walks viewers through the process of setting up the Redux store, integrating reducers and middleware, and connecting it to the React application. Whether you're a React developer seeking to optimize state management or a learner eager to understand the integration of Redux stores, this tutorial offers practical insights into creating and configuring a Redux store for the iNotebook project.
View Video Transcript
0:00
अपने पिछले वीडियो में हम लोगों ने State Bank of Harry के अंदर जो हमारी Redux State है, हमारा जो Redux Store है, उसके Reducer के अंदर हमने एक Reducer बनाया था, जो कि क्या करता था, कि अगर Action का Type डिपॉजिट है, तो पैसो को डिपॉजिट करता था, और अगर Action का Type हमारे पास विड्ड्रॉ है, त�
0:30
ऐसा नहीं है कि एक होगा, हमारे एक से ज़्यादा reducers भी हो सकते हैं, तो हमें करना क्या है, कि सारे के सारे reducers को combine करना है
0:36
और उनको as a single reducer function export करना है, अब यार मैंने ये क्या कह दिया, देखो reducer एक function होता है
0:43
यह तो आपको भी मालूं होगा, reducer एक ऐसा function है, जो कि क्या करता है state लेता है और action contexto और एक्शन हो करता है सिंपल सी बात ह�
0:50
अगर एक से ज्यादा reducers है हमारे पास तो हम चाहेंगे कि हम सारे reducers को combine करके एक साथ export करे�
0:56
तो वो काम कैसे करेंगे हम लोग reducers के अंदर हम लोग क्या करेंगे एक file बनाएंगे index.js ठीक ह�
1:02
और इस index.js file के अंदर हम लोग क्या करेंगे, combine reducers को redux से import करेंगे
1:09
और उसे के साथ साथ हम लोग अपना जो हमारा amount reducer है, amount reducer उसको import करेंगे, ठीक है
1:15
और यह क्या आ गया, तो यह दो चीज़े हम लोगों ने import कर ली, अब मैं क्या करने वाला हूँ
1:20
अब जो चीज मैं export करने वाला हूँ ठीक है मैं यहाँ पर लिखता हूँ export default reducers
1:26
is equal to जो मैं reducers को यहाँ पर export करने वाला हूँ वो होने वाला ह�
1:32
combined reducers ठीक है और इसके अंदर मैं सारे का सारे reducers दे दूँग�
1:36
तो मैं क्या करूँगा कि यहाँ पर एक amount नाम से मैं एक reducer बनाओंगा और मैं यहाँ प�
1:41
लिखूँगा amount reducer ठीक है amount reducer ठीक है अब देखो यार अभी यहाँ पर सिर्�
1:47
एक reducer है लेकिन एक सी जादा reducers भी हो सकते हैं और जब हमारे पास एक सी जादा reducers
1:52
होंगे तो हम यहाँ पर comma लगा के उन सारे के सारे reducers को add करेंगे अगर आप combined reducers पर hover करोग�
1:57
तो यहाँ पर देखो लिखा है turns an object whose values are different reducer functions
2:01
into a single reducer function एक reducer function में इतने सारे reducer functions क�
2:06
wrap करके return करता है एक reducer function में ठीक है अब इस बात का मतलब आपको समझ में आएग�
2:11
तो ये काम मैंने यहाँ पर किया ठीक है अब जो मेरी application की overall state है ठीक ह�
2:16
उसके अंदर क्या-क्या है एक तो मेरा action reducer है ठीक है store store action creator reducer store redux store action creators
2:53
और ये मुझे क्या दे देगी, ये मुझे ये action creators दे देगी, फिर जो भी action मुझे करवाना होगा, वो मैं ऐसे करवा लूँगा
2:58
तो मैं यहाँ पर लिखूँगा export star as, एक बात और बोलता हूँ, this is just one way of doing it
3:03
जरूरी नहीं है कि आप लोग यहाँ पर ऐसे ही करो इसको ठीक है action creators
3:09
ठीक है action creators from मैं क्या करूँगा कि जो हमारा state ह�
3:16
dot slash action creators के अंदर index ठीक है if I am not wrong
3:22
index हाँ ठीक है तो मैंने क्या करा कि state के अंदर स�
3:26
access दे दिया सारे के सारे action creators का कभी भी मुझे action creators को use करना ह�
3:30
यानि कि इस index को use करना है तो मैं state से directly access कर लूँगा एक तरह स�
3:34
accessibility को यहाँ पर बढ़ा दिया ठीक है save करूँगा इस file को औ�
3:38
उसी के साथ साथ मैं क्या करूँगा इसको save करने के बाद मैं store.js के अंदर आउँग�
3:42
और यहाँ पर अपना store बनाऊंगा this is an important step तो ध्यान से सुनन�
3:46
और अगर आप लोग को ऐसा लगता है कि यार हम बहुत सारा code लिखे जा रहे है�
3:51
और समझ में नहीं आ रहे है then it's really very normal believe me redux अगर आप अपनी जिन्दगी में पहली बार कर रहे ह�
3:55
तो ऐसा आप लोगों को यहाँ पर feel होगा ठीक है तो उस feeling को आप लोग हटाओ और मेरी बात क�
4:01
सुनो यहाँ पर जो मैं कह रहा हूँ ठीक है चुकी आने वाले टाइम में आपको सब कुछ समझ में आने वाला ह�
4:05
एक बार चीज़े काम करने लगती हैं उसके बाद आप वापस से engineering करो
4:10
एक चीज को देखो, action creator क्या है, shankar do वाली फोटो को देखो, मैंने इसको as simple as possible बनाने की कोशिश करी है आप लोग इले
4:16
तो अब देखो इस फोटो को, और उससे relate करो, इस state bank of harry वाले examples है
4:21
बिल्कुल समझ में आएगा, target minus click plus click balance update note that nav bar component component same component same component create store reducers from reducers reducers import reducers reducers
5:04
तो create store क्या करता है create store function को समझो क्या करता ह�
5:08
create store सबसे बहुत क्या करता है आपके सारे reducers को लेता है ठीक ह�
5:11
उसके बाद성이 शेट को लेता है जो कि मैं एकदम खाली रखने वाला हूं और इसके बाद यह क्या करता है कि अगर आ�
5:17
कोई मिडल वेयर को अप्लाई करना है तो आप जो है उसको अप्लाई कर सकते हो अब देखो मैंने यहां पर किया क्य�
5:24
मैंने यहाँ पर reducers को import किया, redux thunk को import किया
5:29
redux thunk क्या है, अबी के लिए मैं just short में बताता हूँ आपको, कि यह asynchronous functions को execute करने में help करता है
5:35
but अबी के लिए आप इसको include करो as a middleware, ठीक है, तीन चीज़ें import करी हैं हमने, apply middleware
5:39
create store, और उसे के साथ साथ हमने एक store को बना दिया है control ss save करो ठीक ह�
5:44
आपकी application save हो जाएगी तो अब हमने यहाँ पर जो है अपने store को बना लिया ह�
5:48
तो हमारा जो store है यानि कि हमारी जो redux state है वो एकदम ready ह�
5:53
अब इसको use कैसे करें अब मैं चाहता हूँ कि जो भी state है मेरी वो मैं use कर पाऊँ, ठीक है, तो मैं चाहूँगा कि मेरे पूरी overall application को access मिल जाए, किस चीज की overall application को किस चीज की access मिल जाए, मैं चाहता हूँ overall application को इस index store की access मिल जाए, ठीक है, और ऐसा करने के लिए मैं क्या करूँगा, अपनी index store js में �
6:24
अपने प्रोवाइडर में राप हो गई और मैं इसको इस तरह से कर देता हूं ताकि इसका प्लोज इन टैप भी आ जाए और मैं क्या करूंगा प्रोवाइडर को एक आर्ग्यूमेंट दूंगा मैं कहूंगा स्टोर इगल टो स्टोर तो स्टोर कौन सा वाला स्टोर वह जो हम�
6:54
हो जाएगी reducers is not defined reducers is not defined कहां पर amount reducer.js
7:01
के अंदर reducers is not defined reducers is not defined amount reducers
7:07
index.js ठीक है amount reducers amount reducers state reducers index.js इस index.js में ही कह रहा ह�
7:17
कि amount reduce reducers is not defined export default reducers straightforward dating
7:38
है तो यहां पर मैं इसको सेव करूंगा और उसी के साथ यही काम मैं यहां पर करूंगा अपने इंडिक्स डॉट जीएस के अंद�
7:44
एक्सपोर्ट कॉन्स्ट एक्सपोर्ट कॉन्स्ट रेड्यूसर से डॉट डिफाइन तो यह रहा है हां तो मैं एक्सपोर्ट डिफॉर्�
7:51
इस चीजों कॉपी करूंगा यहां पर और यहां पर मैं कॉल्ट लिखूंगा ठीक है और यह कंपाइल हो जाएगी ठीक है सेव किया और यह कंपाइल हो गई है ठीक है तो यहां पर यह रिपल इकॉल टू एक्सपेक्ट किया है तो मुझे वार्निंग दे रहा है तो ट्रिपल �
8:21
यह जो store का access हमको मिला है, हम लोग इस store को access करके, सबसे बाद त�
8:26
यहाँ पर balance को show कर सकते हैं, और उसके बाद, action
8:30
creators और reducers का इस्तेमाल करके किस तरह से इन buttons को functional
8:34
बना सकते हैं, तो आने वाले videos यार बहुत जार interesting होने वाले हैं, ठीक ह�
8:38
अगर आप लोगों ये चीज़े confusing लग रही हैं तो मैं आप लोगों को एक बहुत�
8:41
sympathy suggestion दूँगा कि आप एक एक बात को ध्यान से सुनो मेरी सबसे पहले आप इसक�
8:46
application को बना लो end तक जाकर बना लो उसके बाद जो जो चीज़े मैंने करी है�
8:50
यहाँ पर उनको डिजेक्ट करने की कोशिश करो और यह शंकर्ट वाली एनिलोजी है इससे यहाँ पर मैं आपको करने की कोशिश कर�
8:56
कि वह बहुत ही हो जाएगा चीज है आपको फील होने से जरूर हो जाएगी यह एक्शन क्रिएटर क्या है और डिस्पैच करने के बा�
9:03
रेड्यूसर काम कर रहा है, अक्शन क्रेटर सिर्फ कमांड दे रहा है, तो वो साथी चीज़े आपको समझ में आ जाएंगे
9:08
और believe me, एक बार ये जो सारा का setup होता है, ये one time setup होता है, उसके बाद आप अपनी application को सिर्फ develop करोगे
9:14
और use dispatch वगैरा hook को इस्तेमाल करके और बाकी के कामों क�
9:19
करके अपनी application में सिर्फ इन चीजों को use करोगे आप ठीक है, so अगर आप लोगों ने अभी त�
9:24
यह playlist access नहीं करी तो जरूर कर लें access को यहाँ click करके save करें इस playlist को यहाँ click करके bookmark करे�
9:29
इस वीडियो में इतने हैं गाइस थैंक यू सो मच गाइस पर वाचिंग इस वीडियो और आज आपको अगर देखते है�
9:34
तो आज आज आ�