Legge til ekstra logikk i Redux-applikasjonen

I denne leksjonen vil vi legge til den siste komponenten i applikasjonen vår. For å være mer presis, vil vi legge til brukerens reaksjon på produktet, enten de har bestilt det eller lest informasjonen om det.

La oss åpne produktapplikasjonen vår. Som med navnet på selgeren, trenger vi å vise brukerens reaksjoner på flere steder i applikasjonen. Det betyr at vi trenger en egen komponent. Derfor starter vi med å opprette en fil i mappen products kalt UserReactions.jsx. La oss først definere et objekt i den som vil inneholde våre reaksjoner:

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

Og under begynner vi å skrive selve funksjonen, der vi vil sende inn slicen product:

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

Skriv nå inn funksjonens krokk i krøllparentesene for UserReactions. For å gjøre dette, itererer vi nøkkel-verdi-parene i vårt reactionObj ved hjelp av map, for hver får vi betegnelsen for knappen ('+', '+/-' eller '-') og den numeriske verdien for den gitte reaksjonen (den vil vi hente fra product i store basert på reaksjonens navn):

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

Og etter dette, på slutten av funksjonskoden, returnerer vi koden med knappene userReactions:

return <div>{userReactions}</div>

Og la oss også legge til litt flere stiler i index.css:

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

Hvis dette virker litt forvirrende, ikke bekymre deg, det vil bli mye mer forståelig snart.

Åpne applikasjonen din med studenter. I applikasjonen din vil det være mulighet for brukere å velge blant studentene en gruppeleder og en kaptein for idrettslaget. Så, etter å ha studert leksjonsmaterialet, opprett en fil i mappen students kalt UserVotes.jsx. I starten av filen, opprett et objekt votesObj, der du vil ha to egenskaper - leader og captain, med verdiene GL og TC, som betegnelse for knappene.

Under i filen, etter definisjonen av objektet votesObj, skriv koden for funksjonen UserVotes, analogt med materialet fra denne leksjonen.