Menambah Logik Tambahan dalam Aplikasi Redux

Pada sesi ini, kita akan menambah komponen terakhir kepada aplikasi kita. Untuk lebih spesifik, kita akan menambah reaksi pengguna kepada produk sama ada yang telah mereka pesan atau baca maklumat mengenainya.

Mari buka aplikasi produk kami. Seperti dalam kes nama penjual, kami perlu menunjukkan reaksi pengguna di beberapa tempat dalam aplikasi. Ini bermakna, kami memerlukan komponen berasingan. Oleh itu, mari kita mulakan dengan mencipta fail UserReactions.jsx dalam folder products. Mari kita mulakan dengan menentukan objek yang akan mengandungi reaksi kami:

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

Dan di bawahnya, mari mula menulis fungsi itu sendiri, di mana kita akan hantar slice product:

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

Sekarang dalam kurungan kerinting, mari tulis badan fungsi UserReactions. Untuk melakukan ini, kita akan ulangi menggunakan map pasangan kunci-nilai bagi reactionObj kami, untuk setiap satu dapatkan tanda untuk butang ('+', '+/-' atau '-') dan nilai berangka bagi sesuatu reaksi (kita akan ambilnya dari product dalam store berdasarkan nama reaksi):

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

Dan selepas itu, pada akhir kod fungsi kembalikan markup dengan butang userReactions:

return <div>{userReactions}</div>

Dan juga tambahkan sedikit lagi gaya ke dalam index.css:

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

Jika ini kelihatan agak mengelirukan, jangan risau, anda akan memahaminya dengan lebih jelas kemudian.

Buka aplikasi pelajar anda. Aplikasi anda akan mempunyai keupayaan untuk pengguna memilih dalam kalangan pelajar ketua kelas dan kapten pasukan sukan. Oleh itu, setelah mengkaji bahan pelajaran, buat fail UserVotes.jsx dalam folder students. Pada permulaan fail, buat objek votesObj, yang akan mempunyai dua sifat - leader dan captain, dengan nilai GL dan TC, sebagai tanda untuk butang.

Di bawah dalam fail selepas menentukan objek votesObj, tulis kod untuk fungsi UserVotes, mengikut analogi dengan bahan dari pelajaran ini.