Up next in 10
Creating a Reducer & Action Creator in Redux _ Complete React Course in Hindi #75
1 views
Feb 11, 2024
In the 75th episode of the "Complete React Course in Hindi," the tutorial delves into the fundamentals of Redux by guiding viewers through the creation of a reducer and action creator. This video provides a hands-on guide on defining the structure of a Redux reducer to manage state changes and creating action creators to trigger specific actions. The instructor demonstrates how these essential Redux elements work together, showcasing practical examples within the iNotebook project. Whether you're a React developer seeking to strengthen your understanding of Redux architecture or a learner interested in creating reducers and actions for state management, this tutorial offers valuable insights into building the foundation of Redux in the iNotebook application.
View Video Transcript
0:00
अपने पिछले वीडियो में हम लोगों नहीं देखा था कि किस तरह से हम लोग एक बहुत ही बेसिक application set up कर सकते हैं जिसमें मैंने state bank of harry करके एक bank बनाया था और उसमें कुछ balance मैंने डाला हुआ था और यहाँ पर मैंने plus और minus बनाया हुआ थे और हमारा यहाँ पर target यह है कि �
0:30
वह वापस रिस्टूर जाएगा मैं काम करता हूं यह मेरी शॉप है ना मैं इसमें से यह माइनस और प्लस का बट�
0:36
मैं काम करता हूं मैं एडिडा स्ट्रूट्स शूज को अटा देता हूं और यह और बैंक बैलेंस ठीक है और मैं यहां प�
0:44
देखूंगा यह मैं काम करता हूं मैं मैं लिखता हूं डिपॉजिट विड्ड्रॉअ मनी ठीक है तो आप डिपॉजिट कर सकते ह�
0:53
विड्ड्रॉअ कर सकते हो मनी ठीक है और अब डेट बैलेंस लिखता हूं यहां पर और पूर्व मिलाकर हम क्या करेंग�
1:01
simple सी चीज करेंगे, और simple सी क्यों कर रहे हैं, क्योंकि हम अभी यहाँ पर सिर्फ Redux को समझ रहे हैं
1:05
मैं बिल्कुल भी यहाँ पर कुछ ऐसी shop अगर नहीं बनाना चाहता, ठीक है, मैं plus पर click करूँगा, तो यहाँ पर क्या होगा
1:11
कि मेरी money बढ़ जाएगी, ठीक है, by 100 रुपए, 1000 रुपए कितना भी
1:15
और minus पर click करूँगा, तो मेरी money कड़ जाएगी, initial balance मेरा यह है, initial balance क�
1:20
मैं 0 रखूँगा, बट अभी के लिए मैंने 10,000 कर दिया है, तो, कुल मेरा अगर हम लोग क्या करेंगे
1:24
यही काम करने वाले हैं अभी के लिए, तो Redux किस तरह से काम करता है यह मेरा target है आप लोग को समझाना ठीक ह�
1:29
तो मैं यह नहीं चाहता कि मैं आपर कुछ code लिख दूँ और उसके बाद आप लोग जो है उसको देख ल�
1:34
आप लोग भी उसको लिख दो और आपका भी चल जाए मेरा भी चल रहा है मेरा तो चली रहा है ठीक ह�
1:38
तो मैं वो नहीं जाता हूँ मैं चाहता हूँ कि आप लोग समझो कि Redux किस तरह से काम करती है ठीक ह�
1:42
तो सबसे पहले यहाँ पर हम लोग तो क्या करेंगे कि रिडक्स को इंस्टॉल करेंगे ठीक है और मैं आप लोगों को लाइब्रेडीज वगैर इंस्टॉल क�
1:49
मांगा सबसे पहले तो आप लोगों को डिडेक्स इंस्टॉल करना है ठीक है फिर इसके बाद रिया रिडक्स इंस्टॉ�
1:55
जाना है ठीक है रियाट रिडक्स और इसके बाद रिडक्स थंक ठीक है जो कि एक मिडल बेर होता है इसके बारे में बा�
2:00
करूंगा अभी के लिए आपको सिर्फ इतना लिखना है यह तीन एक्सटरनल लाइब्रेडीज है पैकेज और जैसे आप जैसे खोल�
2:06
आपके आड हो जाएगी ठीक है यहाँ पर देखो अब यह नहीं हुई है जैसे इन्स्टॉल हो जाएगा वैसे ही आड हो जाएग�
2:11
तो यह तीन लाइब्रेडीज हमारी इंस्टॉल हो जाएगी ठीक है मुझे भरोसाई कर देगा इंस्टॉल ठीक ह�
2:16
अब यहाँ पर आप लोग देखो हमने एक app.js बनाई है हमने एक shop.js बनाई ह�
2:20
मुझे यहाँ पर अपनी पूरी की पूरी जो state है उसको basically एक जगा पर लेकर आना है ठीक ह�
2:26
तो मैं भी क्या करूँगा एक boilerplate template बनाऊँगा उस state के लि�
2:30
अब oil plate template के नाम से यार डरना मत देखो बहुती simple सा काम मैं कर रहा हूँ यहाँ पर एक folder
2:34
बनाऊँगा state के नाम का ठीक है तो यहाँ पर outer folder मे�
2:38
state के नाम का मैं एक folder बनाऊँगा src के अंदर ठीक है src के outer मे�
2:42
यहाँ पर मैं state नाम का एक folder बनाऊँगा जो मेरी पूरी की पूरी application की state जो ह�
2:48
वो manage करेगी तो मैंने SRC के अंदर एक state डाल दिया ठीक है SRC के अंदर एक components भ�
2:53
मेरा होना चाहिए था जिसके अंदर सारे components आते हैं बट अभी मैंने यहाँ पर रायता फैला दिया ह�
2:57
और ऐसा मैंने इसलिए किया है कि बहुत simple सी application है वैसे आप लोग अपने components folder के अंदर डालना सारे के सारे components ठीक ह�
3:03
तो यहाँ पर मैंने state नाम का एक folder बना दिया है और इसके बाद मैं यहाँ पर दो और folders बनाऊँगा state के अंद�
3:09
folder action creators photo reason overall process
3:26
और इसके बाद जो दूसरा मेरा folder है वो reducers है तो एक तो मेरा action creator है एक मेरा reducer है ठीक ह�
3:32
action creator मेरा क्या करेगा action creator मेरा यहाँ पर initiate करेगा action को और जो reducer है वो क्या करेग�
3:39
वो यहाँ पर एक function है जो कि मेरी state को change करेगा तीक है तो अगर मैं यहाँ पर लिखूँ what is a reducer
3:44
what is a reducer react redux तीक है तो यहाँ पर देखो in redux a reducer is a pure function that takes an action
3:53
and the previous state of the application returns a new state तीक है तो यहाँ पर state को change करने के लिए मैं reducer को use करूँग�
3:59
मैं आना चाहूँगा वीडियो नमबर 73 में जिसमें मैं आपको बता रहा था कि यह overall redux का जो process है वो किस तरह से काम करता ह�
4:06
तो यहाँ पर हमारा एक बच्चा था ठीक है वो क्या कर रहा था वो अपनी ममी बापा को बोला था मुझे bad ball चाहिए ठीक ह�
4:11
तो हमने ये type action और payload ये दो चीज़े हमने यहाँ पर भेजी थी और हमने dispatch करी थी शंकर डो को जो की reducer था जो क्या करता था कि market से bad को लेकर आ जाता था और actual में जो state को change करना काम है वो करता था ठीक है और यहाँ पर हम लोग इसी photo में जो चीज़ हमने बात करी थी 73 वाले video में �
4:41
इसको सब कुछ टीप्स टॉल हो गया पैकेज नोट जेसन अपडेट होगी देखो रिडक्स थंग रियाट रियाट रिडक्स सब कुछ �
4:47
गया हमारा ठीक है मैं इसको बंद करूंगा अभी के लिए और मैंने जो दो फोल्डर्स बनाएं एक्शन क्रिएटर्स क�
4:52
हमारे action creators आएंगे और reducers के अंदर हमारे reducers आएंगे ठीक है तो action creators के अंदर यहाँ पर मैं क्या करूँगा एक index.html बनाऊंगा और देखो यार मैं sorry index.js देखो यार यहाँ पर मैं आप लोगों को जो भी चीज बताऊंगा उसमें से कई चीज आपको ऐसी लगेगी कि यार यह �
5:22
एक complex application है आपके पास, उस complex application के लिए, सिर्फ एक बार ये पूरा का पूरा setup आप लोग कर रहे हो
5:28
in fact ये पूरा का पूरा setup करने की आपको ज़रूरत भी नहीं है, और भी तरीके हैं
5:32
बट मैं उन तरीकों में अभी नहीं जाना चाहता, मैं चाहता हूँ कि आप लोग समझो overall process को कि ये चीज कैसे काम कर रही ह�
5:37
Redux क्यों use करें कैसे एक store का access मिल रहा है पूरी की पूरी application को ठीक ह�
5:41
तो यहाँ पर हम लोग क्या करेंगे जल्दी से दो functions लिखेंग�
5:46
और मैं export const इसलिए लिख रहा हूँ कि मैं export करना जाता हूँ दोनों इन function को एक तो मेरा होने वाला है deposit money ठीक ह�
5:51
और एक होने वाला है withdraw money ठीक है पहले deposit money लिख लेता हूँ एक function ह�
5:56
एक arrow function ठीक है यह arrow function क्या करेगा एक amount लेक�
6:00
ठीक है लिख देता हूँ amount ठीक है और क्या करेगा जो हमारी state है, मेरी state मे�
6:06
एक amount होने वाला है, ठीक है, उस state को बढ़ा देगा, ठीक है, औ�
6:10
जो हमारा withdraw money है, वो क्या करेगा, amount को घटा देगा
6:14
ठीक है, simple सी बात है, तो मैं deposit money के साथ साथ withdraw money
6:18
भी बना देता हूँ, ठीक है, तो यहाँ पर मैं withdraw money withdraw money deposit money withdraw money deposit withdraw amount deposit return function function function confusing overall function return
7:03
क्या किया जा रहा है अब ठीक है मैं अब लिखूंगा टाइप इसका टाइप क्या है डिपॉजिट ठीक है और उसी के साथ साथ इसका एक पेलोड होगा यानि कितना डिपॉजिट करना है क्योंकि देखो यह क्या है यह मैं अभी कहां पर हूं मैं एक्शन क्रिएटर में हूं �
7:33
गया था, तो ये चीज आपको बहुत ज़रूरा confusing लगेगी अभी, कि यार हमने ए�
7:37
function return किया, जिसके अंदर एक function call हो रहा था, मैं आपको बताता हूँ हमने यहाँ प�
7:42
किया क्या, हमने यह एक ऐसा function return कर दिया, यानि क�
7:45
deposit money एक ऐसा function return कर रहा है जिसके पास यह amount भी ह�
7:49
ठीक है और यह deposit money अपने आप में एक function है जो कि call होगा कहा व�
7:53
मैं अभी आपको बताऊंगा ठीक है तो मैंने यहाँ पर यह जो चीज लिखी है same ची�
7:57
मैं यहाँ पर भी लिखूँगा ठीक है exactly ली और एक बात और बताता हूँ यार यह चीज आपको लगी यार यह क्या लिखे जा रहा हूँ मैं बार बा�
8:04
बट मैं बता रहा हूँ जो काम मैं भी यहाँ पर कर रहा हूँ वह आपको एक बात समझ गए ना टेंपलेट क�
8:10
उसी को करते जाना है बार बार जब जब आप रिडक्स यूज करोगे तो ठीक है तो यहाँ पर देखो यहाँ पर मैं टाइप में लिख दूँगा विड्ड्रॉउउट ठीक है यह मेरा टाइप है विड्ड्रॉउउट और पेलोड अमाउंट ठीक है और बाकी चीज़े सेम �
8:40
हो ठीक है, हो सकता है कि इस baby का सेरलिक्स लाने का का�
8:44
हैरी नाम का कोई बंदा करता हो, ठीक है इसका bad ball या entertainment वाला का�
8:49
शंकरडो करता हो, इसको खाना के लाने का काम लेटर से विकरान नाम का कोई बंदा करता ह�
8:53
हो सकता है, अगर ये रो रहा है इसके लिए खिलाउने वगैरा लाने का का�
8:57
शुबांगी नाम की कोई लड़की करती हो ठीक है तो हमारे बास बहुत सारे reducers हो सकते है�
9:01
जिनकी अपनी-अपनी responsibility होगी ठीक है और action creators क्या करेंगे बताएंगे कि क्या करना है ठीक ह�
9:07
तो जरूरी नहीं है मेरे बास एक ही यहाँ पर reducer ह�
9:11
लेकिन अभी के लिए मैं क्या करूँगा amount reducer मनाऊँगा amount reducer क्या करेग�
9:15
अब आप यह मत समझना है amount को reduce कर देगा नहीं amount reducer का मतलब यह है क�
9:20
amount के साथ खिलवाड करेगा क्या है amount reducer का मतलब कि यह amount के साथ खिलवाड करेग�
9:26
किस तरह की खिलवाड करेगा देखो यह क्या करेगा यह एक function को return करेगा ठीक ह�
9:34
in fact मुझे export const लिखना चाहिए था ठीक है मैंने export const लिखा और अगर मैं export default लिख दूँ यहाँ पर ठीक ह�
9:43
तो यह by default export हो जाएगा ठीक है मैं एक by default function export कर रहा हूँ reducer नाम का ठीक ह�
9:49
और ये क्या करेगा initial state state is equal to 0 state by default 0 state initial state state is equal to 0 state pass by default 0 state pass initial state action
10:06
money को withdraw करना है money को deposit करना है या फिर कुछ और करना ह�
10:10
यह amount reducer है तो यह amount के साथ खिलवार करेगा हो सकता है हमारे पास और कोई दूसर�
10:14
reducer हो जो और states के साथ खिलवार करें या कुछ और काम करें ठीक ह�
10:18
तो यहाँ पर मैं क्या करूँगा यहाँ पर लिखूँगा if action dot type
10:23
equals to equals to deposit ठीक है, as a string, अगर मेरा action का type deposit है, तब क्या होगा, तब definitely मैं जो मेरी state है उसको change करूँगा, जो मेरा state का, जो amount है, amount मेरी state है, ठीक है, उसको मैं change करूँगा, ठीक है, तो जो भी मेरी state होगी, उसको मैं change कर दूँगा, मैं कहूँगा return state plus action.payload, ठीक है, तो action के अंदर एक payload हो�
10:56
उसको add कर देगी वो payload, withdraw अगर है, तो क्या करेगी
11:01
state में से मैं घटा दूँगा action.payload, अब अगर इन दोनों में से कोई चीज़ नहीं हो रही है
11:05
तो मैं क्या करूँगा, यहाँ पर लिख दूँगा, else return state, ठीक है
11:10
मैं लिख दूँगा यहाँ पर else return state, तो मैं यहाँ पर return stateμάने लिया और मैं इसको by default export कर रहा हू�
11:17
तो मैंने यहाँ पर एक तो action creator बना लिया एक मैंने यहाँ पर reducer बना लिय�
11:22
अब यहाँ पर मैं क्या करूँगा कि action creator और reducer से एक store बनाऊँग�
11:29
और उस store को मैं क्या करूँगा अपनी पूरी application का access दे दूँग�
11:34
तो मैं यहाँ पर जो मेरा store है, जो मेरा redux store ह�
11:37
जिसके बारे में मैंने आपसे यहाँ पर बात करी थी यहाँ पर एक store होता है कहाँ करी थी, आजाओ भा�
11:43
यहाँ करी थी, यहाँ करी थी ठीक है कि एक रिडडक्स स्टोर है इसको पूरी आप्लीकेशन आपकी आक्सेस कर सकती है तो यह रिडडक्स स्टोर जो है इसको ही मैं आप लोगों को दिखाऊंगा कि किस तरह से आक्सेस कर सकती है आपकी आप्लीकेशन तो अगले कुछ वीडियो में इसी की बात करेंगे ल�
12:14
ये मैं भी आपको आगे बताऊँगा पर अभी के लिए आप ये समझ लो कि action creators ये मम्मी पापा है�
12:19
जिनकी बात हमने करी थी ठीक है और हमारा जो shankar do ये reducer जो कि actual काम करता ह�
12:25
वो इस folder के अंदर है ठीक है तो यहाँ मैंने reducer बना दिया और यहाँ प�
12:29
मैंने action creators बना दिये ठीक है जो कि initiate करेंगे actions को तो यहाँ प�
12:33
मैंने action creators बना दिये तो अब मैं यहाँ करूँगा आपको यह बताऊंग�
12:37
कि एक overall store को कैसे create करेंगे जो redux store है और उसके बा�
12:41
store को use कैसे करेंगे और एक बार setup जाता है ना Redux के अंदर तो उसके बाद use करना बहुत आसान हो जाता है with that said अगर आ�
12:47
लोगों ने access नहीं करिए playlist को ज़रूर access करना या click करके इसको bookmark करे�
12:52
इस click या click करके save करें या बिगले इस वीडियो में इतना है guys thank you so much guys for watching
12:56
this video and I will see you next time प्राप्त प्रदे�