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

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

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

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

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

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

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

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

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

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

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

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