Att lägga till ytterligare logik i ett Redux-program

I den här lektionen kommer vi att lägga till den sista komponenten i vår applikation. För att vara mer specifik kommer vi att lägga till användarreaktioner på produkten, där antingen har beställt den eller läst information om den.

Låt oss öppna vår produktapplikation. Precis som med säljarens namn behöver vi visa användarnas reaktioner på flera ställen i applikationen. Det betyder att vi behöver en separat komponent. Därför börjar vi med att skapa en fil UserReactions.jsx i mappen products. Låt oss först skapa ett objekt där våra reaktioner kommer att ligga:

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

Och nedanför börjar vi skriva själva funktionen, som vi kommer att skicka slice:n product till:

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

Nu skriver vi funktionens UserReactions kropp inuti klammerparenteserna. För att göra detta itererar vi nyckel-värde-paren i vårt reactionObj med hjälp av map, för varje par får vi en beteckning för knappen ('+', '+/-' eller '-') och det numeriska värdet för den specifika reaktionen (det kommer vi att hämta från product i store genom reaktionens namn):

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

Och efter det, i slutet av funktionens kod, returnerar vi HTML-strukturen med knapparna userReactions:

return <div>{userReactions}</div>

Och lägg också till lite mer stilar i index.css:

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

Om detta verkar lite förvirrande, oroa dig inte, det kommer att bli mycket tydligare senare.

Öppna din studentapplikation. I din applikation kommer det att finnas möjlighet för användare att välja bland studenterna en gruppledare och en lagkapten för idrottslaget. Därför, efter att ha studerat lektionens material, skapa en fil UserVotes.jsx i mappen students. I början av filen skapar du ett objekt votesObj, som kommer att ha två egenskaper - leader och captain, med värdena GL och TC, som beteckning för knapparna.

Längre ner i filen, efter definitionen av objektet votesObj, skriv koden för funktionen UserVotes, i enlighet med materialet från denna lektion.