Memaparkan Hasil Kerja Thunk dalam Komponen di Redux

Dalam pelajaran lepas, kami menghantar permintaan POST menggunakan thunk addProduct. Sekarang mari paparkan hasil kerjanya dalam komponen.

Buka aplikasi produk kami, dan dalamnya fail NewProductForm.jsx, memandangkan komponen ini bertanggungjawab untuk menambah produk baharu. Mari lihat barisan import. Gantikan import aksi productAdded, dengan import thunk addProduct:

import { addProduct } from './productsSlice'

Sekarang, memandangkan kami tidak menjejaki status 'pending' permintaan dalam slice, mari kita buat supaya pengguna boleh menekan butang menyimpan produk hanya sekali, kerana kami tidak mahu permintaan berulang yang sama. Untuk ini, kami akan buat satu lagi keadaan tempatan:

const [requestStatus, setRequestStatus] = useState('idle')

Seterusnya, selepas pengendali dan sebelum fungsi onSaveProductClick tulis kod yang akan menyemak sama ada semua medan borang telah diisi dan status permintaan berada dalam 'idle':

const canBeSaved =
	[name, desc, price, amount, sellerId].every(Boolean) &&
	requestStatus === 'idle'

Kemudian kami akan ubah kod untuk onSaveProductClick. Pertama, ia akan menjadi fungsi tak segerak dan akan dilaksanakan, jika syarat di atas adalah benar:

const onSaveProductClick = async () => {
	if (canBeSaved) {}
}

Walaupun kami tidak menjejaki status 'rejected' dalam slice, kami masih boleh memaparkan ralat dalam konsol, untuk ini gunakan konstruksi try-catch. Di sini kami juga akan tambah finally, untuk menetapkan semula keadaan tempatan kepada 'idle' selepas permintaan selesai:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('ralat menyimpan produk: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Kami telah selesaikan dengan blok catch dan finally, mari tulis kod untuk blok try. Di sini kami akan tetapkan status tempatan kepada 'in pogress', sehingga kami menerima sebarang respons hasil daripada kerja thunk, kemudian hantar thunk kami addProduct. Menggunakan konstruksi try-catch bergantung pada jenis respons akan dibantu oleh fungsi RTK unwrap, yang ditambahkannya kepada janji yang dipulangkan. Kemudian, jika permintaan berjaya kami menetapkan keadaan tempatan kepada keadaan awal mereka. Kod lengkap untuk onSaveProductClick akan kelihatan 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('ralat menyimpan produk: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Jalankan aplikasi kami dan cuba tambah produk baharu. Seperti yang anda lihat, jika permintaan berjaya medan akan dikosongkan dan produk baharu ditambah ke senarai produk. Juga lihat dalam pelayar pada Redux DevTools dan navigasi antara tabnya, lihat aksi dan bagaimana keadaan anda berubah.

Buka aplikasi pelajar anda. Buka fail NewStudentForm.jsx di dalamnya. Tambah satu lagi keadaan tempatan requestStatus, dan tetapkan nilai awalnya kepada 'idle'. Setelah melihat bahan pelajaran, buat pembolehubah canBeSaved, yang akan menentukan sama ada butang menyimpan data pelajar baharu akan berfungsi/tidak berfungsi, bergantung pada nilai requestStatus dan pengisian medan.

Tulis kod tak segerak untuk onSaveStudentClick, yang akan mengubah nilai requestStatus mengikut situasi, menghantar thunk addProduct dengan data pelajar baharu, mengosongkan medan jika permintaan berjaya dan memaparkan ralat dalam konsol jika gagal, seperti yang ditunjukkan dalam pelajaran. Gunakan untuk ini konstruksi try-catch dan fungsi RTK unwrap.

Jalankan aplikasi anda, tambah pelajar baharu dan pastikan semuanya berfungsi.