Dodavanje dodatne logike u Redux aplikaciju

Na ovoj lekciji ćemo dodati poslednji komponent našoj aplikaciji. Da budemo precizni, dodavaćemo proizvodu reakciju korisnika, koji ga je ili naručio, ili pročitao o njemu informaciju.

Hajde da otvorimo našu aplikaciju sa proizvodima. Kao i u slučaju imena prodavca, nama je potrebno da prikažemo reakcije korisnika na nekoliko mesta u aplikaciji. A to znači, da će nam trebati poseban komponent. Zato počnimo sa tim, da u folderu products kreiramo fajl UserReactions.jsx. Hajde za početak da ispišemo u njemu objekat, u kome će biti naše reakcije:

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

A ispod počnimo da pišemo samu funkciju, u koju ćemo proslediti isečak product:

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

Sada u vitičastim zagradama napišimo telo funkcije UserReactions. Za ovo prođimo pomoću map parove ključ-vrednost našeg reactionObj, za svaki dobijemo oznaku za dugme ('+', '+/-' ili '-') i numeričku vrednost te ili one reakcije (nju mi izvlačimo iz product u store po nazivu reakcije):

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

I posle ovoga na kraju koda funkcije vratimo verstanje sa dugmadima userReactions:

return <div>{userReactions}</div>

A takođe dodajmo još malo stilova u index.css:

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

Ako ovo izgleda pomalo zbunjujuće, ne brinite, kasnije će vam sve postati mnogo jasnije.

Otvorite vašu aplikaciju sa studentima. U vašoj aplikaciji će biti mogućnost za korisnike da izaberu među studentima starošinu grupe i kapitana sportskog tima. Stoga, proučivši materijal lekcije, kreirajte u folderu students fajl UserVotes.jsx. Na početku fajla kreirajte objekat votesObj, u kome ćete imati dva svojstva - leader i captain, sa vrednostima GL i TC, kao oznake za dugmad.

Ispod u fajlu posle definicije objekta votesObj napišite kod funkcije UserVotes, po analogiji sa materijalom iz ove lekcije.