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

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

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

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

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

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

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

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

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

return <div>{userReactions}</div>

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

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

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

เปิดแอปพลิเคชันนักเรียนของคุณ ในแอปพลิเคชันของคุณ จะมีความสามารถสำหรับ ผู้ใช้ในการเลือกหัวหน้านักเรียน ของกลุ่มและกัปตันทีมกีฬา ดังนั้น หลังจากศึกษาบทเรียนแล้ว ให้สร้างไฟล์ UserVotes.jsx ในโฟลเดอร์ students ในตอนต้นของไฟล์ ให้สร้าง อ็อบเจ็กต์ votesObj ซึ่งคุณจะมี สองคุณสมบัติ - leader และ captain พร้อม ค่า GL และ TC เป็น สัญลักษณ์สำหรับปุ่ม

ด้านล่างในไฟล์ หลังจากกำหนดอ็อบเจ็กต์ votesObj แล้ว ให้เขียนโค้ดฟังก์ชัน UserVotes โดยทำตามเนื้อหาที่คล้ายกัน จากบทเรียนนี้