Wysyłanie akcji w aplikacji Redux

Teraz mamy reducer do aktualizacji składu (slice) z reakcjami. Obecnie musimy dodać wysyłanie akcji, która będzie wyzwalana po kliknięciu przez użytkownika przycisku z reakcją. Ale najpierw, aby wszystko działało poprawnie, musimy wprowadzić kilka zmian.

Otwórzmy naszą aplikację z produktami, a w niej plik productsSlice.js. Spójrz na definicję initialState. Widzisz? W obiektach nie ma właściwości z reakcjami. Naprawmy to, ustawiając liczniki każdej z reakcji na 0:

products/productsSlice.js{
  id: '1',
  title: 'Product1',
  desc: 'This is an amazing product',
  price: '300',
  amount: '30',
  reactions: {
    good: 0,
    soso: 0,
    bad: 0,
  },
},

Do drugiego obiektu inicjalizującego dodaj właściwość reactions samodzielnie. Tę samą właściwość musimy dodać poniżej w kodzie dla reducera productAdded, aby nowe produkty również miały tę funkcjonalność. Zróbmy to dla jego metody prepare:

products/productsSlice.jsprepare(title, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      title,
      desc,
      price,
      amount,
      seller: sellerId,
      reactions: {
        good: 0,
        soso: 0,
        bad: 0,
      },
    },
  }
},

Teraz przejdźmy do wysyłania akcji. Otwórzmy plik UserReactions.jsx, następnie zaimportujmy do niego hook useDispatch i reactionClicked:

products/UserReactions.jsximport { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

Na początku kodu w ciele funkcji UserReactions pierwszą linią (przed const userReactions ...) wpiszmy:

products/UserReactions.jsxconst dispatch = useDispatch()

I dodajmy do przycisku reakcji wysyłanie reactionClicked po kliknięciu, przy czym będzie przekazywane id produktu i nazwa reakcji, na którą kliknięto:

products/UserReactions.jsx<button
  key={name}
  type="button"
  className="reaction-button"
  onClick={() =>
    dispatch(reactionClicked({ productId: product.id, reaction: name }))
  }
>
  {image} {product.reactions[name]}
</button>

Pozostaje nam teraz wyświetlić komponent z reakcjami w strukturze HTML dla naszych stron. Zróbmy to w pliku ProductsList.jsx przed elementem Link:

products/ProductsList.jsx<UserReactions product={product} />

I dokładnie tak samo przed elementem Link na stronie produktu w pliku ProductPage.jsx:

products/ProductPage.jsx<UserReactions product={product} />

Teraz, gdy wszystko stanęło na swoim miejscu, możemy uruchomić naszą aplikację. Spróbujmy klikać na przyciski z reakcjami. Możemy dodać nowy produkt i również nacisnąć na nie. Teraz, niezależnie od tego, gdzie klikniemy na przyciski z reakcjami, zmienione wartości będą wyświetlane dla danego produktu na wszystkich stronach. Spójrz na stronę pojedynczego produktu (na której klikałeś/łaś na reakcje) i na stronę z ich listą i odwrotnie, dla wszystkich stron liczba reakcji dla konkretnego produktu będzie taka sama.

Ta lekcja była końcową w rozdziale dotyczącym pracy z danymi w Redux. Pracowaliśmy bardziej dogłębnie z danymi w Redux store i teraz wiemy, jak dodawać potrzebną nam funkcjonalność do aplikacji i używać danych w komponentach React.