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:

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

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

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

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

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

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

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.