Menambahkan Logika Tambahan ke Aplikasi Redux

Pada sesi ini, kita akan menambahkan komponen terakhir ke aplikasi kita. Lebih spesifiknya, kita akan menambahkan reaksi pengguna ke produk, di mana pengguna telah memesannya atau membaca informasinya.

Mari buka aplikasi produk kita. Seperti halnya dengan nama penjual, kita perlu menunjukkan reaksi pengguna di beberapa tempat dalam aplikasi. Itu berarti kita memerlukan komponen terpisah. Oleh karena itu, mari kita mulai dengan membuat file UserReactions.jsx di folder products. Mari untuk saat ini tuliskan di dalamnya sebuah objek yang berisi reaksi-reaksi kita:

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

Dan di bawahnya mari mulai menulis fungsi itu sendiri, di mana kita akan meneruskan slice product:

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

Sekarang dalam kurung kurawal, tuliskan badan fungsi UserReactions. Untuk melakukan ini, kita akan ulangi pasangan kunci-nilai dari reactionObj kita menggunakan map, untuk setiap pasangan dapatkan lambang untuk tombol ('+', '+/-' atau '-') dan nilai numerik dari reaksi tertentu (nilai ini kita akan ambil dari product di store berdasarkan nama reaksinya):

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

Dan setelah itu, di akhir kode fungsi kembalikan markup dengan tombol-tombol userReactions:

return <div>{userReactions}</div>

Serta tambahkan sedikit lagi gaya ke index.css:

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

Jika ini terlihat agak membingungkan, jangan khawatir, nanti semuanya akan menjadi lebih dimengerti.

Buka aplikasi mahasiswa Anda. Di aplikasi Anda, akan ada kemampuan bagi pengguna untuk memilih di antara mahasiswa ketua kelompok dan kapten tim olahraga. Oleh karena itu, setelah mempelajari materi pelajaran, buatlah file di folder students UserVotes.jsx. Di awal file, buatlah objek votesObj, yang di dalamnya Anda akan memiliki dua properti - leader dan captain, dengan nilai GL dan TC, sebagai lambang untuk tombol.

Di bawah file setelah pendefinisian objek votesObj tulis kode fungsi UserVotes, dengan analogi materi dari pelajaran ini.