Додавање на дополнителна логика во Redux апликација

На ова предавање ќе го додадеме последниот компонент на нашата апликација. Поточно, ќе додадеме реакција на корисникот за производот кој или го нарачал или прочитал информации за него.

Да ја отвориме нашата апликација со производи. Како и со името на продавачот, ние треба да ги прикажеме реакциите на корисниците на неколку места во апликацијата. Тоа значи дека ќе ни треба посебен компонент. Затоа да започнеме со тоа што во папката products ќе создадеме датотека UserReactions.jsx. Да пропишеме во неа објект во кој ќе бидат нашите реакции:

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

А подолу да ја започнеме самата функција, во која ќе ја пренесеме секцијата product:

products/UserReactions.jsxexport const UserReactions = ({ product }) => {}

Сега во кадравите загради да ја напишеме телото на функцијата UserReactions. За ова да ги поминеме со map паровите клуч-вредност на нашиот reactionObj, за секој да добиеме ознака за копчето ('+', '+/-' или '-') и нумеричка вредност на соодветната реакција (ја ќе ја извлечеме од product во store по името на реакцијата):

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

И после ова на крајот од кодот на функцијата да ја вратиме верстката со копчињата userReactions:

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

Како и да додадеме уште малку стилови во index.css:

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

Ако ова изгледа малку збунувачки, не грижете се, подоцна ќе ви стане сè многу поразбирливо.