रेडक्स एप्लिकेशन में रिड्यूसर जोड़ना

पिछले पाठ में हमने एक कंपोनेंट UserReaction बनाया था ताकि प्रत्येक उत्पाद के लिए उपयोगकर्ता प्रतिक्रियाएं भी हों। अब हमें एक रिड्यूसर लिखने की आवश्यकता है, जो उपयोगकर्ता द्वारा किसी प्रतिक्रिया के बटन पर क्लिक करने पर प्रतिक्रिया काउंटर को संसाधित करेगा।

आइए हमारे उत्पादों वाला एप्लिकेशन खोलें, और उसमें productsSlice.js फ़ाइल खोलें जिसमें सभी रिड्यूसर हैं। अब reducers प्रॉपर्टी में एक और रिड्यूसर reactionClicked बनाएंगे (हम इसे productAdded से पहले - पहले रख सकते हैं, हालांकि इससे कोई फर्क नहीं पड़ता)। हमेशा की तरह, इसे पैरामीटर के रूप में state और action पास करेंगे:

reactionClicked(state, action) {},

और अब उन घुंघराले ब्रेसिज़ के अंदर, जिन्हें हमने पिछले चरण में खाली छोड़ दिया था, इसके लिए कोड लिखेंगे। सबसे पहले हम action ऑब्जेक्ट के payload से उत्पाद आईडी और प्रतिक्रिया का नाम निकालेंगे:

const { productId, reaction } = action.payload

फिर पास की गई स्टेट से आवश्यक उत्पाद प्राप्त करेंगे:

const currentProduct = state.find(product => product.id === productId)

और यदि ऐसा उत्पाद मौजूद है, तो पास की गई प्रतिक्रिया का मान 1 से बढ़ा देंगे:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

बस, हमारा reactionClicked के लिए कोड तैयार है:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

आइए फ़ाइल के अंत में प्राप्त action creator का एक्सपोर्ट जोड़ें:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

यहां दो महत्वपूर्ण बिंदु ध्यान देने योग्य हैं। जैसा कि आपको पिछले पाठों से याद होगा - रिड्यूसर के कोड में सीधे इस तरह से मान अपडेट करना मना है (इस लाइन को देखें: reactions[reaction]++), लेकिन हमारे लिए यह चल जाएगा, क्योंकि हम इसे createSlice के अंदर कर रहे हैं, जो Immer लाइब्रेरी का उपयोग करता है। यह सुनिश्चित करेगी कि हमारा कोड मान को "सुरक्षित" रूप से अपडेट करने के लिए परिवर्तित हो जाए। यह हमें जटिल चीजों को अधिक सरल तरीके से लिखने की अनुमति देता है।

अगली बात जो याद रखनी चाहिए - action ऑब्जेक्ट में न्यूनतम संभव जानकारी होनी चाहिए - केवल इतनी कि यह बताया जा सके कि क्या हुआ है। इसमें कोई भी गणना करना उचित नहीं है। स्टेट को अपडेट करने के लिए सभी गणनाएं रिड्यूसर में की जानी चाहिए, यहां इसके लिए जितनी भी लॉजिक लिखनी हो, लिख सकते हैं।

अपना छात्रों वाला एप्लिकेशन खोलें और studentsSlice.js फ़ाइल में reducers फ़ील्ड में एक और रिड्यूसर voteClicked जोड़ें, जैसा कि पाठ में दिखाया गया है। इसके लिए कोड लिखें। आपके रिड्यूसर का कार्य है - क्लिक करने पर उस vote (या वोट) का मान बढ़ाना, जिस पर क्लिक किया गया था, उस विशेष छात्र के लिए, 1 से।

फ़ाइल के अंत में प्राप्त action creator voteClicked को एक्सपोर्ट करना न भूलें।