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:

products/UserReactions.jsxconst reactionObj = {
  good: '+',
  soso: '+/-',
  bad: '-',
}

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

products/UserReactions.jsxexport 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):

products/UserReactions.jsxconst 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:

products/UserReactions.jsxreturn <div>{userReactions}</div>

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

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.