Redux aplikasiýa goşmaça logikany goşmak

Bu sapakda biz aplikasiýamyza iň soňky komponenti goşarys. Eger takyk bolsa, öz harydymyza ulanjyň jogabyny, ýa-da ony sargyt edeni ýa-da onuň barada maglumat okadygy üçin goşarys.

Geliň harytlarymyzyň aplikasiýasyny açalyň. Satyjyň ady ýaly, biz ulanjyň jogabyny aplikasiýanyň birnäçe ýerinde görkezmeli. Bu bolsa aýratyn komponent gerekdigi aňladyýar. Şonuň üçin products papkasynda UserReactions.jsx faýlyny döredip başlalyň. Ilki bilen onuň içinde jogablarymyzy saklaýan obýekti ýazalyň:

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

We aşakda, özüne product slaýsy iberýän funksiýany ýazyp başlalyň:

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

Indi egrew möhürleri içinde UserReactions funksiýasynyň bedenini ýazalyň. Bunuň üçin reactionObj-iň açary-gymmat jübütlerini map ulanyp geçiriň, her biri üçin düwmäniň belligini ('+', '+/-' ýa-da '-') we şol ýa-da beýleki jogabyň san bahasyny (ony biz product-dan store-dan jogabyň ady boýunça alyp bileris) alyň:

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

We şondan soň, funksiýanyň kodunyň ahyrynda userReactions düwmeleri bilen wersiýany yzyna gaýtaryň:

return <div>{userReactions}</div>

We index.css-a ýene birnäçe stili goşalyň:

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

Eger bu birnäçe çylşyrymly görünýän bolsa, aladalanmaň, indiki bölümlerde hemmesi ýene-de açyk bolar.

Okuwçylaryňyz bilen aplikasiýaňyzy açyň. Aplikasiýaňyzda ulanjylar üçin okuwçylar arasyndan toparyň starostasyny we sport toparynyň kapitanyny saýlamak mümkinçiligi bolmaly. Şonuň üçin, sapak materiallaryny öwrenenden soň, students papkasynda UserVotes.jsx faýlyny dörediň. Faýlyň başynda votesObj obýektini dörediň, onuň içinde iki aýratynlyk bolmaly - leader we captain, GL we TC gymmatlary bilen, düwmeler üçin belgi hökmünde.

Faýlda, votesObj obýekti kesgitlendikden soň, bir aşakda, bu sapagyň materiallaryna meňzeşlikde UserVotes funksiýasynyň koduny ýazyň.