Pridanie dodatočnej logiky do aplikácie Redux

V tejto lekcii pridáme poslednú komponentu do našej aplikácie. Ak máme byť konkrétnejší, pridáme k produktu reakciu používateľa, ktorý ho buď objednal, alebo si o ňom prečítal informácie.

Otvorme našu aplikáciu s produktami. Rovnako ako v prípade názvu predajcu, potrebujeme ukázať reakcie používateľov na niekoľkých miestach aplikácie. A to znamená, že budeme potrebovať samostatnú komponentu. Preto začneme tým, že v priečinku products vytvoríme súbor UserReactions.jsx. Na začiatok do neho zadefinujme objekt, v ktorom budú naše reakcie:

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

A nižšie začneme písať samotnú funkciu, do ktorej budeme odovzdávať slice product:

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

Teraz do zložených zátvoriek napíšme telo funkcie UserReactions. Na to preiterujeme pomocou map páry kľúč-hodnota nášho reactionObj, pre každú získame označenie pre tlačidlo ('+', '+/-' alebo '-') a číselnú hodnotu tej ktorej reakcie (budeme ju ťahať z product v store podľa názvu reakcie):

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

A potom na konci kódu funkcie vrátime šablónu s tlačidlami userReactions:

return <div>{userReactions}</div>

A tiež pridajme ešte nejaké štýly do index.css:

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

Ak to vyzerá trochu mätúco, nebuďte znepokojení, neskôr vám bude všetko oveľa zrozumiteľnejšie.

Otvorte svoju aplikáciu so študentmi. Vo vašej aplikácii bude možnosť pre používateľov vybrať medzi študentmi štósta skupiny a kapitána športového tímu. Preto po preštudovaní materiálov lekcie vytvorte v priečinku students súbor UserVotes.jsx. Na začiatku súboru vytvorte objekt votesObj, v ktorom budete mať dve vlastnosti - leader a captain, s hodnotami GL a TC, ako označenie pre tlačidlá.

Nižšie v súbore po zadefinovaní objektu votesObj napíšte kód funkcie UserVotes, analogicky podľa materiálu z tejto lekcie.