Papildu loģikas pievienošana Redux lietotnē

Šajā nodarbībā mēs pievienosim pēdējo komponentu mūsu lietotnei. Ja runāt konkrētāk, tad mēs produktam pievienosim lietotāju reakciju, kurš to vai nu pasūtīja, vai izlasīja par to informāciju.

Atvērsim mūsu produktu lietotni. Tāpat kā gadījumā ar pārdevēja nosaukumu, mums jāparāda lietotāju reakcijas vairākās lietotnes vietās. Un tas nozīmē, ka mums būs nepieciešams atsevišķs komponents. Tāpēc sāksim ar to, ka mapē products izveidosim failu UserReactions.jsx. Sākumā ierakstīsim tajā objektu, kurā būs mūsu reakcijas:

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

Un zemāk sāksim rakstīt pašu funkciju, kurai padosim slīkšņu product:

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

Tagad cirtainajās iekavās ierakstīsim funkcijas UserReactions pamattekstu. Lai to izdarītu, izmantosim map, lai izietu cauri mūsu reactionObj atslēgas un vērtību pāriem, katram iegūstot apzīmējumu pogai ('+', '+/-' vai '-') un skaitlisko vērtību konkrētai reakcijai (to mēs iegūsim no product store pēc reakcijas nosaukuma):

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

Un pēc tam funkcijas koda beigās atgriezīsim izkārtojumu ar pogām userReactions:

return <div>{userReactions}</div>

Un arī pievienosim vēl nedaudz stilus index.css:

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

Ja tas izskatās nedaudz mulsinoši, neuztraucieties, turpmāk jums kļūs daudz skaidrāk.

Atveriet savu studentu lietotni. Jūsu lietotnē būs iespēja lietotājiem izvēlēties starp studentiem grupas vecāko un sporta komandas kapteini. Tāpēc, izpētījis nodarbības materiālus, izveidojiet mapē students failu UserVotes.jsx. Faila sākumā izveidojiet objektu votesObj, kurā jums būs divas īpašības - leader un captain, ar vērtībām GL un TC, kā apzīmējumus pogām.

Zemāk failā pēc objekta votesObj definēšanas ierakstiet funkcijas UserVotes kodu, pēc analoģijas ar materiālu no šīs nodarbības.