Redux एप्लिकेशन में एक्शन भेजना

अब हमारे पास रिएक्शन स्लाइस को अपडेट करने के लिए एक रिड्यूसर है। अब हमें एक्शन भेजना जोड़ना है जो तब ट्रिगर होगी जब उपयोगकर्ता रिएक्शन बटन पर क्लिक करेगा। लेकिन पहले, यह सुनिश्चित करने के लिए कि सब कुछ पूरी तरह से काम करे, हमें कुछ बदलाव करने की आवश्यकता है।

आइए हमारे उत्पादों वाले एप्लिकेशन को खोलें, और उसमें productsSlice.js फ़ाइल खोलें। initialState की परिभाषा को देखें। देख रहे हैं? ऑब्जेक्ट्स में रिएक्शन वाला कोई गुण नहीं है। आइए इसे ठीक करते हैं, प्रत्येक रिएक्शन की गिनती को 0 पर सेट करके:

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

दूसरे आरंभिक ऑब्जेक्ट में reactions गुण स्वयं जोड़ें। यही गुण हमें नीचे productAdded रिड्यूसर के कोड में भी जोड़ना होगा, ताकि नए उत्पादों में भी यह कार्यक्षमता हो। आइए इसे इसके prepare मेथड के लिए करते हैं:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

अब एक्शन भेजने के लिए आगे बढ़ते हैं। UserReactions.jsx फ़ाइल खोलें, फिर इसमें useDispatch हुक और reactionClicked इम्पोर्ट करें:

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

UserReactions फ़ंक्शन के बॉडी में कोड की शुरुआत में पहली लाइन (const userReactions ... से पहले) लिखें:

const dispatch = useDispatch()

और रिएक्शन बटन पर क्लिक करने पर reactionClicked भेजने का हैंडलर लगाएंगे, इस दौरान उत्पाद की id और उस रिएक्शन का नाम पास किया जाएगा, जिस पर क्लिक किया गया था:

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

अब हमें रिएक्शन वाले कम्पोनेंट को हमारे पेजों के लेआउट में रेंडर करना बाकी है। आइए इसे ProductsList.jsx फ़ाइल में Link एलिमेंट से पहले करते हैं:

<UserReactions product={product} />

और ठीक इसी तरह Link एलिमेंट से पहले उत्पाद पेज पर ProductPage.jsx फ़ाइल में:

<UserReactions product={product} />

अब, जब सब कुछ अपनी जगह पर आ गया है, हम अपना एप्लिकेशन चला सकते हैं। आइए रिएक्शन बटनों पर क्लिक करके देखते हैं। हम एक नया उत्पाद जोड़ सकते हैं और उन पर भी क्लिक कर सकते हैं। अब, हम रिएक्शन बटनों पर जहाँ भी क्लिक करें, परिवर्तित मान उस उत्पाद के लिए सभी पेजों पर दिखाई देंगे। अलग-अलग उत्पाद पेज (जहाँ आपने रिएक्शन पर क्लिक किया था) और उनकी सूची वाले पेज को देखें और इसके विपरीत, सभी पेजों के लिए किसी विशेष उत्पाद के रिएक्शन की संख्या समान होगी।

यह पाठ Redux में डेटा के साथ काम करने वाले अध्याय में अंतिम था। हमने Redux store में डेटा के साथ और अधिक गहराई से काम किया और अब हम जानते हैं कि एप्लिकेशन में आवश्यक कार्यक्षमता कैसे जोड़ें और React कम्पोनेंट्स में डेटा का उपयोग कैसे करें।

अपना छात्रों वाला एप्लिकेशन खोलें। studensSlice.js फ़ाइल में इनिशियलाइज़ेशन वाले ऑब्जेक्ट्स में votes गुण संबंधित फ़ील्ड के साथ जोड़ें। यह studentAdded रिड्यूसर के लिए भी करें।

UserVotes.jsx फ़ाइल में UserVotes फ़ंक्शन के अंदर useDispatch हुक के लिए dispatch सेट करें और वोटिंग बटनों पर क्लिक करने पर voteClicked एक्शन भेजें, इसमें छात्र की id और vote का नाम पास करें, जैसा कि पाठ में दिखाया गया है।

StudentsList और StudentPage कम्पोनेंट्स के लेआउट में वोटिंग के लिए बटन रेंडर करें।