Dodawanie dodatkowej logiki do aplikacji Redux

Na tym zajęciu dodamy ostatni komponent do naszej aplikacji. Jeśli być konkretnym, to będziemy dodawać do produktu reakcję użytkownika, który go albo zamawiał, albo przeczytał o nim informacje.

Otwórzmy naszą aplikację z produktami. Jak w przypadku z nazwą sprzedawcy, nam trzeba pokazać reakcje użytkowników w kilku miejscach aplikacji. A to znaczy, że będziemy potrzebować oddzielnego komponentu. Dlatego zacznijmy od tego, że w folderze products stworzymy plik UserReactions.jsx. Dajmy na początku wpiszmy w nim obiekt, w którym będą nasze reakcje:

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

A poniżej zaczniemy pisać samą funkcję, do której będziemy przekazywać slice product:

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

Teraz w nawiasach klamrowych napiszmy ciało funkcji UserReactions. W tym celu przeiterujemy za pomocą map pary klucz-wartość naszego reactionObj, dla każdej otrzymamy oznaczenie dla przycisku ('+', '+/-' lub '-') i numeryczną wartość tej lub innej reakcji (ją my będziemy wyciągać z product w store po nazwie reakcji):

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

I po tym na końcu kodu funkcji zwróćmy wersztkę z przyciskami userReactions:

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

A także dodajmy jeszcze trochę stylów do index.css:

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

Jeśli to wygląda nieco zagmatwanie, nie przejmuj się, dalej stanie ci się wszystko o wiele zrozumialsze.