Hiển thị kết quả công việc của thunk trong component trong Redux

Ở bài học trước, chúng ta đã gửi một yêu cầu POST bằng thunk addProduct. Bây giờ hãy hiển thị kết quả công việc của nó trong component.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó là file NewProductForm.jsx, vì component này chịu trách nhiệm cho việc thêm sản phẩm mới. Hãy xem các dòng import. Thay thế import của action productAdded, bằng import của thunk addProduct:

import { addProduct } from './productsSlice'

Bây giờ, vì chúng ta không theo dõi trong slice trạng thái 'pending' của yêu cầu, hãy làm sao để người dùng chỉ có thể nhấp vào nút lưu sản phẩm một lần, vì chúng ta không muốn các yêu cầu lặp lại giống nhau. Để làm điều này, hãy tạo thêm một local state:

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

Tiếp theo, sau các trình xử lý và trước hàm onSaveProductClick hãy viết mã, trong đó kiểm tra xem tất cả các trường của biểu mẫu có được điền đầy đủ không và trạng thái yêu cầu có đang ở 'idle' không:

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

Sau đó chúng ta sẽ thay đổi mã cho onSaveProductClick. Thứ nhất, đây sẽ là một hàm bất đồng bộ và nó sẽ thực thi, nếu điều kiện trên là đúng:

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

Mặc dù chúng ta không theo dõi trạng thái 'rejected' trong slice, chúng ta vẫn có thể in lỗi ra console, để làm điều này hãy sử dụng cấu trúc try-catch. Ở đây chúng ta cũng sẽ thêm finally, để sau khi thực hiện yêu cầu lại đặt local state về 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('lỗi lưu sản phẩm: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Chúng ta đã xử lý xong các khối catch và finally, hãy viết mã cho khối try. Ở đây chúng ta sẽ đặt local trạng thái thành 'in progress', cho đến khi chúng ta nhận được một phản hồi nào đó từ kết quả công việc của thunk, sau đó gửi thunk addProduct của chúng ta. Việc sử dụng cấu trúc try-catch tùy thuộc vào loại phản hồi sẽ được hỗ trợ bởi hàm RTK unwrap, mà nó thêm vào promise được trả về. Sau đó, nếu yêu cầu thành công, chúng ta đặt các local state về trạng thái ban đầu của chúng. Mã đầy đủ cho onSaveProductClick sẽ trông như thế này:

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('lỗi lưu sản phẩm: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Hãy khởi chạy ứng dụng của chúng ta và thử thêm một sản phẩm mới. Như bạn thấy, trong trường hợp yêu cầu thành công các trường sẽ được làm sạch và sản phẩm mới được thêm vào danh sách sản phẩm. Cũng hãy xem trong trình duyệt Redux DevTools và di chuyển qua các tab của nó, xem các action và state của bạn thay đổi như thế nào.

Hãy mở ứng dụng sinh viên của bạn. Mở file NewStudentForm.jsx trong đó. Thêm một local state requestStatus nữa, và đặt nó ban đầu thành 'idle'. Sau khi tìm hiểu tài liệu bài học, hãy tạo biến canBeSaved, với sự trợ giúp của nó nút lưu dữ liệu sinh viên mới sẽ hoạt động/không hoạt động, tùy thuộc vào giá trị của requestStatus và việc điền đầy đủ các trường.

Hãy viết mã bất đồng bộ cho onSaveStudentClick, sẽ thay đổi giá trị của requestStatus theo tình huống, gửi thunk addProduct với dữ liệu sinh viên mới, làm sạch các trường trong trường hợp yêu cầu thành công và in ra console lỗi trong trường hợp thất bại, như được hiển thị trong bài học. Sử dụng cho việc này cấu trúc try-catch và hàm RTK unwrap.

Hãy khởi chạy ứng dụng của bạn, thêm một sinh viên mới và đảm bảo rằng mọi thứ hoạt động.