Pošiljanje action in hook useDispatch v Redux

Izvedli smo skoraj vse sestavne dele za delovanje Redux aplikacije. Ostalo je samo še razumeti pošiljanje action iz React komponente. Pa začnimo.

Odprite našo aplikacijo s produkti. V formi komponente NewProductForm imamo gumb za shranjevanje podatkov novega produkta. Dodajmo mu obravnavalnik klika. Naj ob kliku nanj sproži obravnavalnik onSaveProductClick:

products/NewProductForm.jsx<button type="button" onClick={onSaveProductClick}>
  save
</button>

Pri ustvarjanju novega produkta bomo potrebovali nov id zanj. Ustvarili ga bomo z uporabo dobro znane knjižnice nanoid. Mimogrede, ni je treba namestiti, saj je že vključena v paket RTK. Dodajmo nanoid v uvoz:

products/NewProductForm.jsximport { nanoid } from '@reduxjs/toolkit'

Prav tako se spomnimo, da je edini način za spreminjanje state - klicati metodo dispatch, ki je na voljo v store in poslati objekt action. Da pridemo do te metode, bomo uporabili React-Redux hook useDispatch. Uvožimo ga:

products/NewProductForm.jsximport { useDispatch } from 'react-redux'

V kodi funkcije NewProductForm pripravimo zanj konstanto dispatch takoj za tem, ko smo pripravili konstante za naše lokalne state:

products/NewProductForm.jsxconst dispatch = useDispatch()

Prav tako moramo uvoziti action creator productAdded, ki smo ga dobili v prejšnji lekciji:

products/NewProductForm.jsximport { productAdded } from './productsSlice'

Zdaj lahko napišemo samo funkcijo obravnavalnika onSaveProductClick. Naredimo to pred ukazom return:

products/NewProductForm.jsxconst onSaveProductClick = () => {}

Znotraj funkcije kličemo dispatch, oblikujemo objekt action, v lastnost payload katerega bodo prišli ustvarjeni id, naziv, opis, cena in količina produkta. Vse te podatke vzamemo iz lokalnih state. Pri tem na začetku preverimo v pogoju so vsa polja izpolnjena - samo v tem primeru kličemo dispatch. Na koncu kode funkcije vrnemo lokalne state v začetno stanje:

products/NewProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productAdded({
        id: nanoid(),
        name,
        desc,
        price,
        amount
      })
    )

    setName('')
    setDesc('')
    setPrice(0)
    setAmount(0)
  }
}

Zdaj zaženemo našo aplikacijo, vnesemo podatke v polja obrazca in pritisnemo gumb shranjevanja. Hura, spodaj na strani se je pojavil nov produkt. Če odpremo Redux DevTools, in v njem zavihek Inspector, vidimo, da je levo poleg @@INIT pojavil še naš action products/productAdded. V desnem delu pa lahko klikamo po zavihkih Action in State, medtem ko preklapljamo med @@INIT in products/productAdded. Zdaj vidimo, da se naš nov produkt doda. Prav tako na zavihku Action vidimo action, samodejno ustvarjen z createSlice (kliknite, na primer, na Raw). Hura: ni nam ga bilo treba napisati ročno.