Shtimi i Logjikës shtesë në aplikacionin Redux

Në këtë sesion ne do të shtojmë komponentin e fundit në aplikacionin tonë. Për të qenë më specifik, ne do të shtojmë në produkt reaksionin e përdoruesit, i cili ose e ka porositur atë, ose ka lexuar informacion rreth tij.

Le të hapim aplikacionin tonë me produktet. Ashtu si në rastin e emrit të shitësit, ne duhet të tregojmë reaksionin e përdoruesve në disa vende të aplikacionit. Dhe kjo do të thotë që do të na duhet një komponent i veçantë. Prandaj le të fillojmë duke krijuar në dosjen products fajllin UserReactions.jsx. Le të fillojmë duke shkruar në të një objekt, ku do të jenë reaksionet tona:

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

Dhe më poshtë le të fillojmë të shkruajmë vetë funksionin, ku do të kalojmë slice-in product:

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

Tani në kllapat kaçurrelë le të shkruajmë trupin e funksionit UserReactions. Për këtë le të përsërisim me anë të map çiftet çelës-vlerë të objektit tonë reactionObj, për secilën të marrim përcaktimin për butonin ('+', '+/-' ose '-') dhe vlerën numerike të një reaksioni të caktuar (atë do ta nxjerrim nga product në store sipas emrit të reaksionit):

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

Dhe pas kësaj në fund të kodit të funksionit le të kthejmë strukturën me butonat userReactions:

return <div>{userReactions}</div>

Dhe gjithashtu le të shtojmë edhe pak stile në index.css:

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

Nëse kjo duket disi e ndërlikuar, mos u shqetësoni, më vonë gjithçka do të bëhet shumë më e kuptueshme për ju.

Hapni aplikacionin tuaj me studentët. Në aplikacionin tuaj do të ketë mundësi për përdoruesit të zgjedhin midis studentëve parinë e grupit dhe kapitenin e ekipit sportiv. Prandaj, pasi të keni studiuar materialet e mësimit, krijoni në dosjen students fajllin UserVotes.jsx. Në fillim të fajllit krijoni objektin votesObj, ku do të keni dy veti - leader dhe captain, me vlera GL dhe TC, si përcaktim për butonat.

Më poshtë në fajll pas përcaktimit të objektit votesObj shkruani kodin e funksionit UserVotes, sipas analogjisë me materialin nga ky mësim.