Visning av thunk-resultater i en komponent i Redux

I forrige leksjon sendte vi en POST-forespørsel ved hjelp av thunk addProduct. La oss nå vise resultatene av dens arbeid i komponenten.

La oss åpne applikasjonen vår med produkter, og i den filen NewProductForm.jsx, siden denne komponenten er ansvarlig for å legge til et nytt produkt. La oss se på linjene med importer. La oss erstatte importen av action productAdded med importen av thunk addProduct:

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

Nå, siden vi ikke sporer statusen 'pending' for forespørselen i slicen, la oss gjøre slik at brukeren bare kan trykke på knappen for å lagre produktet én gang, fordi vi ikke trenger de samme gjentatte forespørslene. For å gjøre dette, la oss opprette en annen lokal state:

products/NewProductForm.jsxconst [requestStatus, setRequestStatus] = useState('idle')

Deretter, etter hendelseshåndtererne og før funksjonen onSaveProductClick, la oss skrive kode der vi sjekker om alle skjemafeltene er fylt ut og om forespørselsstatusen er 'idle':

products/NewProductForm.jsxconst canBeSaved =
  [name, desc, price, amount, sellerId].every(Boolean) &&
  requestStatus === 'idle'

Deretter vil vi endre koden for onSaveProductClick. For det første vil dette være en asynkron funksjon, og den vil utføres hvis betingelsen ovenfor er sann:

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

Selv om vi ikke sporer statusen 'rejected' i slicen, kan vi likevel vise feilen i konsollen, for å gjøre dette vil vi bruke konstruksjonen try-catch. Her vil vi også legge til finally, for etter at forespørselen er utført, å sette den lokale staten tilbake til 'idle':

products/NewProductForm.jsxconst onSaveProductClick = async () => {
  if (canBeSaved) {
    try {
    } catch (err) {
      console.error('save product error: ', err)
    } finally {
      setRequestStatus('idle')
    }
  }
}

Vi har behandlet catch og finally blokkene, la oss skrive koden for try blokken. Her vil vi sette den lokale statusen til 'in progress' inntil vi får et svar som et resultat av thunk-arbeidet, deretter sender vi thunk addProduct. For å bruke try-catch konstruksjonen avhengig av type svar, vil RTK-funksjonen unwrap hjelpe oss, som den legger til i den returnerte promise. Deretter, hvis forespørselen var vellykket, setter vi de lokale statene tilbake til deres opprinnelige tilstander. Den fullstendige koden for onSaveProductClick vil se slik ut:

products/NewProductForm.jsxconst onSaveProductClick = async () => {
  if (canBeSaved) {
    try {
      setRequestStatus('in progress')
      await dispatch(
        addProduct({ name, desc, price, amount, seller: sellerId })).unwrap()
      setName('')
      setDesc('')
      setPrice(0)
      setAmount(0)
      setSellerId('')
    } catch (err) {
      console.error('save product error: ', err)
    } finally {
      setRequestStatus('idle')
    }
  }
}

La oss starte applikasjonen vår og prøve å legge til et nytt produkt. Som du ser, i tilfelle en vellykket forespørsel, tømmes feltene og det nye produktet legges til i produktlisten. Se også i nettleseren i Redux DevTools og bla gjennom fanene, se på actions og hvordan staten din endres.