A thunk működésének eredményeinek megjelenítése komponensben a Redux-ban

Az előző órán elküldtünk egy POST-kérelmet a addProduct thunk segítségével. Most jelenítsük meg a működésének eredményeit a komponensben.

Nyissuk meg a termékalkalmazásunkat, és benne a NewProductForm.jsx fájlt, mivel ez a komponens felelős az új termék hozzáadásáért. Nézzük meg az import sorokat. Cseréljük le a productAdded action importját a addProduct thunk importjára:

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

Most, mivel a slice-ban nem követjük a kérés 'pending' állapotát, tegyük úgy, hogy a felhasználó csak egyszer kattinthasson a termék mentése gombra, hiszen nincsenek szükségünk ugyanazokra az ismétlődő kérésekre. Ehhez hozzunk létre még egy lokális állapotot:

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

Ezután a kezelők után és a onSaveProductClick függvény előtt írjuk meg a kódot, amelyben ellenőrizzük, hogy minden mező ki van-e töltve és a kérés állapota 'idle'-e:

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

Majd módosítjuk a onSaveProductClick kódját. Először is ez egy aszinkron függvény lesz, és csak akkor hajtódik végre, ha a fenti feltétel igaz:

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

Annak ellenére, hogy a slice-ban nem követjük a 'rejected' állapotot, kiírhatjuk a hibát a konzolra, ehhez használjuk a try-catch konstrukciót. Itt hozzáadunk egy finally részt is, hogy a kérés végrehajtása után visszaállítsuk a lokális állapotot 'idle'-ra:

products/NewProductForm.jsxconst onSaveProductClick = async () => {
  if (canBeSaved) {
    try {
    } catch (err) {
      console.error('Termék mentési hiba: ', err)
    } finally {
      setRequestStatus('idle')
    }
  }
}

A catch és finally blokkokkal megvagyunk, most írjuk meg a kódot a try blokkhoz. Itt beállítjuk a lokális állapotot 'in pogress'-re, amíg nem kapunk valamilyen választ a thunk működése eredményeképpen, majd elküldjük a addProduct thunk-ot. A try-catch konstrukció használatához a válasz típusától függően az RTK unwrap függvénye segít, amelyet hozzáad a visszaadott promise-hoz. Majd, ha a kérés sikeres volt, visszaállítjuk a lokális állapotokat kezdeti értékeikre. A teljes kód a onSaveProductClick-hoz így fog kinézni:

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('Termék mentési hiba: ', err)
    } finally {
      setRequestStatus('idle')
    }
  }
}

Indítsuk el az alkalmazásunkat és próbáljunk hozzáadni egy új terméket. Amint látható, sikeres kérés esetén a mezők kiürülnek és az új termék hozzáadódik a terméklistához. Nézzük meg a böngészőben a Redux DevTools-ot is, kattintsunk a lapjai között, nézzük meg az action-öket és hogyan változik az állapot.