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

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

Отворимо нашу апликацију са производима. Као и са именом продавца, морамо приказати реакције корисника на неколико места у апликацији. То значи да ће нам требати посебан компонент. Зато почнимо тако што у фасцикли products креирамо фајл UserReactions.jsx. Прво ћемо у њему дефинисати објекат који ће садржати наше реакције:

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

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

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

Сада у витичастим заградама напишимо тело функције UserReactions. За ово ћемо проћи кроз парове кључ-вредност нашег reactionObj користећи map, за сваки добити ознаку за дугме ('+', '+/-' или '-') и нумеричку вредност одређене реакције (извући ћемо је из 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;
}

Ако ово изгледа помало збуњујуће, не брините, ускоро ће вам све бити много јасније.