Redux অ্যাপ্লিকেশনে অতিরিক্ত লজিক যোগ করা

এই সেশনে আমরা আমাদের অ্যাপ্লিকেশনে সর্বশেষ কম্পোনেন্টটি যোগ করব। আরও স্পষ্টভাবে বললে, আমরা পণ্যটিতে ব্যবহারকারীর প্রতিক্রিয়া যোগ করব, যিনি হয় এটি অর্ডার দিয়েছেন অথবা এটি সম্পর্কে তথ্য পড়েছেন।

আসুন আমাদের পণ্য অ্যাপ্লিকেশনটি খুলি। বিক্রেতার নামের ক্ষেত্রে যেমন ছিল, তেমনি আমাদের অ্যাপ্লিকেশনের একাধিক স্থানে ব্যবহারকারীদের প্রতিক্রিয়া দেখানোর প্রয়োজন হবে। আর এর অর্থ হল আমাদের একটি আলাদা কম্পোনেন্টের প্রয়োজন হবে। তাই শুরু করা যাক products ফোল্ডারে UserReactions.jsx ফাইল তৈরি করে। আসুন প্রথমে এটির ভিতরে একটি অবজেক্ট লিখি, যেখানে আমাদের প্রতিক্রিয়াগুলো থাকবে:

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

এবং নীচে মূল ফাংশনটি লেখা শুরু করি, যার মধ্যে আমরা স্লাইস product পাস করব:

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

এখন কার্লি ব্র্যাকেটের মধ্যে UserReactions ফাংশনের বডি লিখি। এর জন্য map ব্যবহার করে আমাদের reactionObj-এর কী-ভ্যালু জোড়াগুলো traverse করব, প্রতিটির জন্য বাটনের জন্য একটি চিহ্ন পাব ('+', '+/-' বা '-') এবং একটি নির্দিষ্ট প্রতিক্রিয়ার সাংখ্যিক মান (এটি আমরা 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>
  )
})

এবং তারপর ফাংশন কোডের শেষে বাটন userReactions সহ মার্কআপ রিটার্ন করব:

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

এবং index.css-এ আরও কিছু স্টাইল যোগ করব:

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

যদি এটি কিছুটা বিভ্রান্তিকর মনে হয়, চিন্তা করবেন না, পরে এটি আপনার কাছে অনেক বেশি বোধগম্য হয়ে উঠবে।