Redux အပလီကေးရှင်းတွင် action ပို့ခြင်း

ယခုအခါ ကျွန်ုပ်တို့တွင် တုံ့ပြန်ချက်များ slice ကို မွမ်းမံခြင်းအတွက် reducer ရှိပြီဖြစ်သည်။ ယခုအခါ အသုံးပြုသူက တုံ့ပြန်ချက် ခလုတ်ကို ကလစ်နှိပ်သည့်အခါ ဖြစ်ပေါ်လာမည့် action ပို့ခြင်းကို ထည့်သွင်းရန် လိုအပ်ပါသည်။ သို့သော် အရာအားလုံး အပြည့်အဝ အလုပ်လုပ်နိုင်ရန် မတိုင်ခင် ပြောင်းလဲမှု နှစ်ခုကို ပြုလုပ်ရန် လိုအပ်ပါသည်။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များနှင့်အတူ အပလီကေးရှင်းကို ဖွင့်ကြည့်ပါ၊ ထို့အတွင်း ဖိုင်ဖြစ်သော 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 reducer အတွက် ကုဒ်ထဲသို့လည်း ထည့်သွင်းရန် လိုအပ်ပါသည်၊ သို့မှသာ ထုတ်ကုန်အသစ်များတွင်လည်း ထိုလုပ်ဆောင်ချက် ပါဝင်မည်ဖြစ်သည်။ ၎င်း၏ prepare method အတွက် ထိုသို့ပြုလုပ်ကြပါစို့။

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

ယခု action ပို့ခြင်းကို စတင်လုပ်ဆောင်ပါမည်။ ဖိုင် UserReactions.jsx ကို ဖွင့်ပါ၊ ထို့နောက် ထဲသို့ useDispatch hook နှင့် reactionClicked ကို import လုပ်ပါ။

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

အစပိုင်း ကုဒ်တွင် UserReactions function ၏ ခန္ဓာကိုယ်အတွင်း ပထမဆုံးစာကြောင်း (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>

ယခုအခါ ကျွန်ုပ်တို့၏ စာမျက်နှာငယ်များအတွက် တုံ့ပြန်ချက်များနှင့်အတူ component ကို layout တွင် ဖော်ပြရန် ကျန်ရှိနေပါသည်။ ဖိုင် ProductsList.jsx အတွင်း Link element မတိုင်ခင် ထိုသို့ပြုလုပ်ကြပါစို့။

<UserReactions product={product} />

ထိုနည်းတူပင် ထုတ်ကုန် စာမျက်နှာပေါ်ရှိ Link element မတိုင်ခင် ဖိုင် ProductPage.jsx တွင်လည်း ပြုလုပ်ပါ။

<UserReactions product={product} />

ယခုအခါ အရာအားလုံး သင့်တော်သောနေရာသို့ ရောက်ရှိသွားပြီဖြစ်သဖြင့် ကျွန်ုပ်တို့၏ အပလီကေးရှင်းကို စတင်လည်ပတ်နိုင်ပါပြီ။ တုံ့ပြန်ချက် ခလုတ်များကို ကလစ်နှိပ်ကြည့်ရန် ကြိုးစားကြည့်ပါ။ ထုတ်ကုန်အသစ်ကို ထည့်သွင်းနိုင်ပြီး ၎င်းတို့ကိုလည်း ကလစ်နှိပ်ကြည့်နိုင်ပါသည်။ ယခုအခါ တုံ့ပြန်ချက် ခလုတ်များကို ကျွန်ုပ်တို့ မည်သည့်နေရာတွင် ကလစ်နှိပ်နှိပ်၊ ပြောင်းလဲထားသော တန်ဖိုးများကို စာမျက်နှာအားလုံးပေါ်တွင် ဤထုတ်ကုန်အတွက် ပြသပေးမည်ဖြစ်သည်။ သီးခြားထုတ်ကုန် စာမျက်နှာ (သင်သည် တုံ့ပြန်ချက်များကို ကလစ်နှိပ်ခဲ့သောစာမျက်နှာ) နှင့် ၎င်းတို့၏ စာရင်း စာမျက်နှာကို ကြည့်ပါ၊ ထို့အတူ ပြောင်းပြန်လည်း ကြည့်ပါ။ စာမျက်နှာအားလုံးအတွက် သီးခြားထုတ်ကုန်အတွက် တုံ့ပြန်ချက် အရေအတွက်သည် တူညီနေမည်ဖြစ်သည်။

ဤသင်ခန်းစာသည် Redux ရှိ ဒေတာများနှင့် အလုပ်လုပ်ခြင်း ဇာတ်ကြောင်းအတွက် နောက်ဆုံးပိတ် သင်ခန်းစာဖြစ်သည်။ ကျွန်ုပ်တို့သည် Redux store ရှိ ဒေတာများနှင့် ပိုမိုနက်ရှိုင်းစွာ အလုပ်လုပ်ခဲ့ပြီး ယခုအခါ အပလီကေးရှင်းအတွင်း လိုအပ်သော လုပ်ဆောင်ချက်များကို မည်သို့ထည့်သွင်းရမည်၊ React components များတွင် ဒေတာများကို မည်သို့အသုံးပြုရမည်ကို သိရှိပြီဖြစ်သည်။

သင့် ကျောင်းသားများနှင့်အတူ အပလီကေးရှင်းကို ဖွင့်ပါ။ ဖိုင် studensSlice.js အတွင်းရှိ အစပြုရန် အရာဝတ္ထုများတွင် votes ဂုဏ်သတ္တိကို သက်ဆိုင်ရာ အကွက်များနှင့်အတူ ထည့်သွင်းပါ။ studentAdded reducer အတွက်လည်း ထိုသို့ပြုလုပ်ပါ။

UserVotes function အတွင်း ဖိုင် UserVotes.jsx တွင် useDispatch hook အတွက် dispatch ကို သတ်မှတ်ပြီး မဲပေး ခလုတ်များကို ကလစ်နှိပ်သည့်အခါ voteClicked action ကို ပို့ပါ၊ ၎င်းအား ကျောင်းသား၏ id နှင့် vote ၏ အမည်ကို ပို့ဆောင်ပေးပါ၊ သင်ခန်းစာတွင် ပြသထားသည့်အတိုင်း ဆင်တူအောင် ပြုလုပ်ပါ။

မဲပေးခြင်းအတွက် ခလုတ်ငယ်များကို StudentsList နှင့် StudentPage components များအတွက် layout တွင် ဖော်ပြပါ။