Sending action and useDispatch hook in Redux

Vi har implementert nesten alle komponenter for å få Redux-applikasjonen til å fungere. Det som gjenstår er å finne ut av hvordan man sender en action fra en React-komponent. La oss komme i gang.

Åpne produktapplikasjonen vår. I skjemaet til komponenten NewProductForm har vi en knapp for å lagre dataene til det nye produktet. La oss legge til en klikk-håndterer på den. La klikk-håndtereren onSaveProductClick utløses når vi klikker på den:

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

For å opprette et nytt produkt trenger vi en ny id for det. Vi vil generere den ved hjelp av den velkjente biblioteken nanoid. Forresten, den trenger du ikke å installere, siden den allerede følger med RTK-pakken. La oss legge til nanoid i importen:

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

Vi husker også at den eneste måten å endre state på er å kalle metoden dispatch, som finnes på store, og sende med et action-objekt. For å få tilgang til denne metoden, vil vi bruke React-Redux-hooken useDispatch. La oss importere den også:

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

I koden til funksjonen NewProductForm oppretter vi en konstant dispatch for den rett etter at vi har opprettet konstanter for våre lokale states:

products/NewProductForm.jsxconst dispatch = useDispatch()

Vi må også importere action creator-en productAdded, som vi fikk i forrige leksjon:

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

Nå kan vi skrive selve funksjonen for håndtereren onSaveProductClick. La oss gjøre dette før return-kommandoen:

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

Inne i funksjonen kaller vi dispatch, danner action-objektet, hvor i egenskapen payload vil vi putte den genererte id-en, navn, beskrivelse, pris og antall produkt. Alle disse dataene henter vi fra de lokale state-ene. Samtidig sjekker vi i starten med en betingelse om alle feltene er fylt ut - bare i så fall kaller vi dispatch. På slutten av funksjonskoden returnerer vi de lokale state-ene til deres opprinnelige tilstand:

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

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

La oss nå starte applikasjonen vår, skrive inn data i skjemafeltene og trykke på lagre-knappen. Hurra, et nytt produkt dukket opp nederst på siden. Ved å åpne Redux DevTools, og der fanen Inspector, ser vi at til venstre, i tillegg til @@INIT, er action-en vår products/productAdded også dukket opp. Og i høyre del kan vi klikke på fanene Action og State, og veksle mellom @@INIT og products/productAdded. Nå ser vi at det nye produktet vårt blir lagt til. Også på Action-fanen ser vi action-en, som ble generert automatisk ved hjelp av createSlice (klikk for eksempel på Raw). Hurra: vi trengte ikke å skrive den manuelt.