Extra logica toevoegen aan een Redux-applicatie

In deze les voegen we de laatste component toe aan onze applicatie. Om concreet te zijn, voegen we aan het product de reactie van de gebruiker toe, die het ofwel heeft besteld, of er informatie over heeft gelezen.

Laten we onze productenapplicatie openen. Net zoals bij de naam van de verkoper, moeten we de gebruikersreacties op meerdere plaatsen in de applicatie tonen. Dit betekent dat we een aparte component nodig hebben. Daarom beginnen we met het aanmaken van een bestand UserReactions.jsx in de map products. Laten we om te beginnen een object erin definiëren dat onze reacties zal bevatten:

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

En daaronder beginnen we met het schrijven van de functie zelf, waaraan we de slice product zullen doorgeven:

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

Schrijf nu in de accolades het lichaam van de functie UserReactions. Hiervoor itereren we met map over de sleutel-waardeparen van ons reactionObj, voor elke halen we de weergave voor de knop op ('+', '+/-' of '-') en de numerieke waarde van de desbetreffende reactie (deze halen we uit product in de store op basis van de reactienaam):

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

En daarna retourneren we aan het einde van de functiecode de markup met de knoppen userReactions:

return <div>{userReactions}</div>

En voegen we ook nog wat stijlen toe in index.css:

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

Als dit er enigszins verwarrend uitziet, maak je geen zorgen, het wordt verderop veel duidelijker voor je.

Open je applicatie met studenten. In je applicatie zal er een mogelijkheid zijn voor gebruikers om onder de studenten een groepsleider en een captain van het sportteam te kiezen. Bestudeer daarom de lesmaterialen en maak in de map students een bestand aan UserVotes.jsx. Creëer aan het begin van het bestand een object votesObj, waarin je twee eigenschappen hebt - leader en captain, met waarden GL en TC, als weergave voor de knoppen.

Hierna in het bestand, na de definitie van het object votesObj, schrijf je de code van de functie UserVotes, analoog aan het materiaal uit deze les.