Redux Uygulamasına Ek Mantık Ekleme

Bu derste uygulamamıza son bileşeni ekleyeceğiz. Daha spesifik olmak gerekirse, ürüne, onu sipariş veren veya hakkında bilgi okuyan kullanıcının tepkisini ekleyeceğiz.

Ürün uygulamamızı açalım. Satıcı adında olduğu gibi, kullanıcı tepkilerini uygulamanın birkaç yerinde göstermemiz gerekiyor. Bu da demek oluyor ki ayrı bir bileşene ihtiyacımız olacak. Bu nedenle products klasöründe UserReactions.jsx dosyasını oluşturarak başlayalım. Öncelikle içinde tepkilerimizin bulunacağı bir nesne tanımlayalım:

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

Aşağıda ise, içine product slice'ını ileteceğimiz fonksiyonun kendisini yazmaya başlayalım:

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

Şimdi süslü parantezler içinde UserReactions fonksiyonunun gövdesini yazalım. Bunun için reactionObj nesnemizin anahtar-değer çiftlerini map kullanarak döngüye alalım, her biri için buton işaretini ('+', '+/-' veya '-') ve sayısal tepki değerini (bunu store'daki product içinden tepkinin adına göre alacağız) elde edelim:

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

Sonrasında fonksiyon kodunun sonunda butonları içeren userReactions'ın yer aldığı HTML yapısını döndürelim:

return <div>{userReactions}</div>

Ayrıca index.css dosyasına biraz daha stil ekleyelim:

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

Eğer bu biraz kafa karıştırıcı görünüyorsa, endişelenmeyin, ilerledikçe her şey daha anlaşılır olacak.

Öğrenci uygulamanızı açın. Uygulamanızda kullanıcıların öğrenciler arasından grup lideri ve spor takımı kaptanı seçebilme imkanı olacak. Bu nedenle, ders materyallerini inceledikten sonra, students klasöründe UserVotes.jsx dosyasını oluşturun. Dosyanın başında iki özelliği olan bir votesObj nesnesi oluşturun - leader ve captain, değerleri ise buton işaretleri olarak GL ve TC olsun.

Aşağıda, dosyada nesne tanımından sonra bu dersteki materyale benzer şekilde UserVotes fonksiyonunun kodunu yazın.