การเพิ่มลอจิกเสริมในแอปพลิเคชัน Redux

ในบทเรียนนี้ เราจะเพิ่มคอมโพเนนต์สุดท้าย ให้กับแอปพลิเคชันของเรา ถ้าจะให้เจาะจง เราจะเพิ่มปฏิกิริยาผู้ใช้ลงในสินค้า ซึ่งผู้ใช้จะต้องเคยสั่งซื้อสินค้านี้ หรืออ่านข้อมูลเกี่ยวกับมัน

มาเปิดแอปพลิเคชันสินค้าของเรากัน เหมือนกับกรณีของชื่อผู้ขาย เราต้อง แสดงปฏิกิริยาผู้ใช้ในหลายจุดของแอปพลิเคชัน นั่นหมายความว่าเราจะต้องมีคอมโพเนนต์แยกต่างหาก ดังนั้น เริ่มต้นด้วยการสร้างไฟล์ UserReactions.jsx ในโฟลเดอร์ products เริ่มต้น ให้เขียนอ็อบเจ็กต์ในนั้น ซึ่งจะมี ปฏิกิริยาของเรา:

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

และด้านล่าง เริ่มเขียนฟังก์ชันเอง ซึ่งเราจะส่งสไลซ์ product เข้าไป:

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

ตอนนี้ภายในเครื่องหมายปีกกา ให้เขียน เนื้อหาของฟังก์ชัน UserReactions ทำได้โดยการวนลูป ด้วย map ผ่านคู่คีย์-ค่าของ reactionObj ของเรา สำหรับแต่ละคู่จะได้สัญลักษณ์ สำหรับปุ่ม ('+', '+/-' หรือ '-') และค่าตัวเลขของปฏิกิริยานั้นๆ (เราจะ ดึงมันจาก product ใน store โดยใช้ชื่อปฏิกิริยา):

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

และหลังจากนั้น ในตอนท้ายของโค้ดฟังก์ชัน ให้คืนค่า JSX พร้อมปุ่ม userReactions:

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

และยังเพิ่มสไตล์อีกเล็กน้อย ใน index.css:

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

หากสิ่งนี้ดูสับสนเล็กน้อย ไม่ต้องกังวล ต่อไปคุณจะเข้าใจทุกอย่างมากขึ้น