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ň.