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

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

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

products/UserReactions.jsxconst reactionObj = {
  good: '+',
  soso: '+/-',
  bad: '-',
}

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

products/UserReactions.jsxexport const UserReactions = ({ product }) => {}

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

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

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

products/UserReactions.jsxreturn <div>{userReactions}</div>

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

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

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