Adăugarea de logică suplimentară în aplicația Redux

În această lecție vom adăuga ultima componentă la aplicația noastră. Mai precis, vom adăuga la produs reacția utilizatorilor care fie l-au comandat, fie au citit informații despre el.

Să deschidem aplicația noastră cu produsele. La fel ca în cazul numelui vânzătorului, trebuie să arătăm reacțiile utilizatorilor în mai multe locuri din aplicație. Asta înseamnă că vom avea nevoie de o componentă separată. De aceea vom începe prin a crea în folderul products fișierul UserReactions.jsx. Să începem prin a defini în el un obiect care va conține reacțiile noastre:

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

Și mai jos vom începe să scriem funcția propriu-zisă, în care vom pasa slice-ul product:

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

Acum în acolade vom scrie corpul funcției UserReactions. Pentru asta vom parcurge cu map perechile cheie-valoare ale obiectului nostru reactionObj, pentru fiecare vom obține o denumire pentru buton ('+', '+/-' sau '-') și valoarea numerică a unei anumite reacții (o vom extrage din product în store după numele reacției):

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

Și după asta la finalul codului funcției vom returna markup-ul cu butoanele userReactions:

return <div>{userReactions}</div>

De asemenea, vom adăuga încă puțin stiluri în index.css:

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

Dacă acest lucru pare puțin confuz, nu vă faceți griji, further everything will become much clearer for you.

Deschideți aplicația voastră cu studenții. În aplicația voastră va exista posibilitatea pentru utilizatori să aleagă dintre studenți șeful grupei și căpitanul echipei sportive. De aceea, după ce ați studiat materialele lecției, creați în folderul students fișierul UserVotes.jsx. La începutul fișierului creați un obiect votesObj, în care veți avea două proprietăți - leader și captain, cu valorile GL și TC, ca denumiri pentru butoane.

Mai jos în fișier după definirea obiectului votesObj scrieți codul funcției UserVotes, prin analogie cu materialul din această lecție.