Redux යෙදුමට අතිරේක තර්කනය එකතු කිරීම

මෙම පාඩමෙන්, අපි අපගේ යෙදුමට අවසාන අංගය එකතු කරමු. වඩාත් නිශ්චිතව කිවහොත්, අපි නිෂ්පාදනයට පරිශීලක ප්‍රතිචාරය එකතු කරමු, එනම් පරිශීලකයා එය ඇණවුම් කළ හෝ එහි තොරතුරු කියවූ.

අපගේ නිෂ්පාදන යෙදුම විවෘත කරමු. විකුණුම්කරුගේ නම පෙන්වූ ආකාරයටම, අපි පරිශීලක ප්‍රතිචාර යෙදුමේ ස්ථාන කිහිපයක පෙන්විය යුතුය. මෙයින් අදහස් කරන්නේ අපට වෙනම අංගයක් අවශ්‍ය වන බවයි. එබැවින් products ෆෝල්ඩරය තුළ UserReactions.jsx ගොනුව සාදා ගනිමු. මුලින්ම අපගේ ප්‍රතිචාර අඩංගු වන වස්තුව එහි ලියමු:

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

පහතින්, අපි යොමු කරන කොටස product ලබා ගන්නා මූලික ශ්‍රිතය ලියන්නෙමු:

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

දැන් ශ්‍රිතයේ දොරටපුව තුළ UserReactions ශ්‍රිතයේ ශරීරය ලියමු. මේ සඳහා map භාවිතයෙන් අපගේ reactionObj හි යුගල නැවත නැවත ගමන් කරමු, සෑම එකක් සඳහාම බොත්තම සඳහා අංකනය ('+', '+/-' හෝ '-') සහ සංඛ්‍යාත්මක ප්‍රතිචාර අගය ලබා ගනිමු (අපි එය store තුළ ඇති product වලින් ප්‍රතිචාර නමින් ගනිමු):

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

ඉන්පසු ශ්‍රිත කේතය අවසානයේ බොත්තම් සමඟ HTML ආකෘතිය userReactions නැවත ලබා දෙමු:

return <div>{userReactions}</div>

ඒ වගේම ටිකක් විලාසිතා index.css වෙත එකතු කරමු:

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

මෙය ටිකක් ව්‍යාකූල ලෙස පෙනේ නම්, කරදර නොවන්න, පසුව ඔබට සියල්ල වඩාත් තේරුම් යනු ඇත.

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කරන්න. ඔබගේ යෙදුමේ, පරිශීලකයින්ට කණ්ඩායමේ නායකයා සහ ක්‍රීඩා කණ්ඩායමේ කපිතාන් ලෙස ශිෂ්‍යයින් තෝරා ගැනීමට හැකියාව ඇත. එබැවින්, පාඩම් ඉගෙන ගැනීමෙන් පසු, students ෆෝල්ඩරය තුළ UserVotes.jsx ගොනුව සාදන්න. ගොනුව ආරම්භයේදී votesObj වස්තුව සාදන්න, එහි ගුණාංග දෙකක් ඇති අතර - leader සහ captain, එහි අගයන් GL සහ TC වේ, බොත්තම් සඳහා අංකනය ලෙස.

ගොනුවේ පහත, වස්තුව අර්ථ දැක්වීමෙන් පසු votesObj UserVotes ශ්‍රිතයේ කේතය ලියන්න, මෙම පාඩමේ අන්තර්ගතයට සමානව.