Redux အပလီကေးရှင်းတွင် အပို ယုတ္တိကို ပေါင်းထည့်ခြင်း

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

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များအပလီကေးရှင်းကို ဖွင့်ကြည့်ပါစို့။ ရောင်းချသူအမည်ကိစ္စကဲ့သို့ပင်၊ အသုံးပြုသူများ၏တုံ့ပြန်မှုကို အပလီကေးရှင်း၏ နေရာများစွာတွင် ပြသရန် လိုအပ်ပါသည်။ ၎င်းဆိုလိုသည်မှာ ကျွန်ုပ်တို့အတွက် သီးခြား component တစ်ခု လိုအပ်မည်ဖြစ်သည်။ ထို့ကြောင့် products ဖိုလ်ဒါထဲတွင် ဖိုင် UserReactions.jsx ကို ဖန်တီးခြင်းဖြင့် စတင်ပါမည်။ စတင်ရန် ကျွန်ုပ်တို့၏တုံ့ပြန်မှုများရှိမည့် object တစ်ခုကို ထဲတွင် ရေးကြည့်ပါစို့။

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

အောက်တွင် ကျွန်ုပ်တို့သည် function အစစ်ကို စတင်ရေးသားပါမည်၊ ထို function ထဲသို့ slice product ကို ထည့်သွင်းပေးပါမည်။

export const UserReactions = ({ product }) => {}

ယခု ကွင်းကောက်များထဲတွင် UserReactions function ၏ body ကို ရေးသားပါမည်။ ၎င်းအတွက် ကျွန်ုပ်တို့၏ reactionObj ၏ key-value စုံတွဲများကို map အသုံးပြု၍ loop ပတ်ပါမည်၊ တစ်ခုချင်းစီအတွက် ခလုတ်အတွက် အမှတ်အသား ('+', '+/-' သို့မဟုတ် '-') နှင့် တုံ့ပြန်မှုတစ်ခုခု၏ ဂဏန်းတန်ဖိုးကို ရရှိပါမည် (၎င်းကို ကျွန်ုပ်တို့ store ထဲရှိ product မှ တုံ့ပြန်မှု အမည်ဖြင့် ထုတ်ယူပါမည်)။

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

ထို့နောက် function code ၏ နောက်ဆုံးတွင် ခလုတ်များ userReactions ပါသော markup ကို return ပြန်ပါမည်။

return <div>{userReactions}</div>

၎င်းအပြင် style အနည်းငယ်ထပ်မံ index.css ထဲသို့ ပေါင်းထည့်ပါမည်။

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

ဤသည်မှာ အနည်းငယ်ရှုပ်ထွေးပုံရသည်ဆိုလျှင်၊ စိတ်မပူပါနှင့်၊ နောက်ပိုင်းတွင် သင်အားလုံးကို ပိုမိုနားလည်လာပါလိမ့်မည်။

သင့်ကျောင်းသားများအပလီကေးရှင်းကို ဖွင့်ပါ။ သင့်အပလီကေးရှင်းတွင် အသုံးပြုသူများအား ကျောင်းသားများထဲမှ အုပ်စုခေါင်းဆောင်နှင့် အားကစားအသင်း ကပ္ပတိန် ကို ရွေးချယ်ခွင့်ရှိပါမည်။ ထို့ကြောင့်၊ သင်ခန်းစာ၏အချက်အလက်များကို လေ့လာပြီးနောက်၊ students ဖိုလ်ဒါထဲတွင် ဖိုင် UserVotes.jsx ကို ဖန်တီးပါ။ ဖိုင်၏အစတွင် object votesObj ကို ဖန်တီးပါ၊ ထို object တွင် property နှစ်ခု ရှိမည် - leader နှင့် captain၊ တန်ဖိုးများမှာ GL နှင့် TC၊ ခလုတ်များအတွက် အမှတ်အသား အဖြစ်။

အောက်တွင် object votesObj သတ်မှတ်ချက်ပြီးနောက် UserVotes function ၏ code ကို ဤသင်ခန်းစာမှ အချက်အလက်နှင့် တူညီစွာ ရေးသားပါ။