Tilføjelse af ekstra logik til Redux-applikationen

På denne lektion vil vi tilføje den sidste komponent til vores applikation. For at være mere præcis, vil vi tilføje brugerreaktioner til produktet, hvor brugeren enten har bestilt det eller læst information om det.

Lad os åbne vores produktapplikation. Som med sælgerens navn, er vi nødt til at vise brugerreaktioner på flere steder i applikationen. Og det betyder, at vi får brug for en separat komponent. Så lad os starte med at oprette en fil UserReactions.jsx i mappen products. Lad os til at starte med skrive et objekt i den, som vil indeholde vores reaktioner:

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

Og nedenfor vil vi begynde at skrive selve funktionen, hvor vi vil videregive slice product:

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

Nu skal vi i tuborgklammerne skrive kroppen af funktionen UserReactions. For at gøre dette vil vi gennemgå nøgle-værdi-parrene i vores reactionObj ved hjælp af map, for hver vil vi få en betegnelse for knappen ('+', '+/-' eller '-') og den numeriske værdi af den pågældende reaktion (den vil vi hente fra product i store ud fra reaktionens navn):

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

Og efter det, i slutningen af funktionens kode, returnerer vi layoutet med knapperne userReactions:

return <div>{userReactions}</div>

Og vi tilføjer også lidt flere stile i index.css:

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

Hvis dette virker en smule forvirrende, Vær ikke bekymret, snart vil det blive meget mere forståeligt for dig.

Åbn din applikation med studerende. I din applikation vil der være mulighed for, at brugere kan vælge blandt de studerende en gruppeformand og en kaptajn for sportsholdet. Så, efter at have studeret lektionens materiale, opret filen UserVotes.jsx i mappen students. I starten af filen, opret et objekt votesObj, hvor du vil have to egenskaber - leader og captain, med værdierne GL og TC, som betegnelse for knapperne.

Nedenfor i filen, efter definitionen af objektet votesObj, skriv koden for funktionen UserVotes, analogt med materialet fra denne lektion.