Menampilkan Hasil Kerja Thunk di Komponen dalam Redux

Pada pertemuan sebelumnya kita mengirim POST-request menggunakan thunk addProduct. Sekarang mari tampilkan hasil kerjanya di komponen.

Buka aplikasi produk kita, dan di dalamnya file NewProductForm.jsx, karena komponen ini bertanggung jawab untuk menambah produk baru. Mari lihat baris-baris import. Ganti import aksi productAdded, dengan import thunk addProduct:

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

Sekarang, karena kita tidak melacak status 'pending' request di slice, mari kita buat agar pengguna hanya bisa menekan tombol penyimpanan produk satu kali, sebab kita tidak ingin request yang sama berulang. Untuk ini, kita buat satu state lokal lagi:

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

Selanjutnya setelah handler dan sebelum fungsi onSaveProductClick tulis kode yang memeriksa apakah semua field form sudah terisi dan apakah status request berada dalam 'idle':

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

Kemudian kita akan ubah kode untuk onSaveProductClick. Pertama-tama, ini akan menjadi fungsi async dan akan dieksekusi jika kondisi di atas terpenuhi:

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

Meskipun kita di slice tidak melacak status 'rejected', kita tetap bisa menampilkan error di konsol, untuk ini gunakan konstruksi try-catch. Di sini kita juga akan menambahkan finally, untuk setelah eksekusi request mengatur ulang state lokal ke 'idle':

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

Kita sudah membahas blok catch dan finally, mari tulis kode untuk blok try. Di sini kita atur status lokal menjadi 'in progress', sampai kita mendapat beberapa respon sebagai hasil kerja thunk, kemudian kirim thunk kita addProduct. Menggunakan konstruksi try-catch tergantung pada tipe respon akan dibantu oleh fungsi RTK unwrap, yang ditambahkannya ke promise yang dikembalikan. Kemudian, jika request berhasil kita atur state-state lokal ke keadaan awal mereka. Kode lengkap untuk onSaveProductClick akan terlihat seperti ini:

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')
    }
  }
}

Jalankan aplikasi kita dan coba tambahkan produk baru. Seperti yang Anda lihat, dalam kasus request berhasil field-field dibersihkan dan produk baru ditambahkan ke daftar produk. Juga lihat di browser pada Redux DevTools dan jelajahi tab-tabnya, lihat aksi-aksinya dan bagaimana state Anda berubah.