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:

import { 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:

const [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':

const 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:

const 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':

const 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:

const 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.

Buka aplikasi Anda dengan siswa-siswa. Buka di dalamnya file NewStudentForm.jsx. Tambahkan satu state lokal lagi requestStatus, dan atur awalnya ke 'idle'. Dengan mempelajari materi pelajaran, buatlah variabel canBeSaved, dengan bantuannya tombol penyimpanan data siswa baru akan bekerja/tidak bekerja, tergantung pada nilai requestStatus dan pada terisinya field-field.

Tulis kode async untuk onSaveStudentClick, yang akan mengubah nilai requestStatus sesuai situasi, mengirim thunk addProduct dengan data siswa baru, membersihkan field-field dalam kasus request berhasil dan menampilkan error di konsol dalam kasus gagal, seperti yang ditunjukkan dalam pelajaran. Gunakan untuk ini konstruksi try-catch dan fungsi RTK unwrap.

Jalankan aplikasi Anda, tambahkan siswa baru dan pastikan semuanya bekerja.