Xử lý yêu cầu POST được gửi bằng thunk trong Redux

Chúng ta đã nhận được dữ liệu sản phẩm và người bán từ máy chủ và hiển thị chúng trong ứng dụng. Nhưng với thunk, chúng ta có thể không chỉ nhận mà còn gửi dữ liệu. Hãy cùng tìm hiểu cách thực hiện điều đó.

Sau khi chúng ta thêm một sản phẩm mới, nó vẫn còn trong store của chúng ta, tức là bên trong ứng dụng của chúng ta. Hãy làm sao để sản phẩm mới được lưu trữ trên máy chủ.

Hãy bắt đầu với máy chủ. Ở đây chúng ta sẽ phải xử lý không phải GET, mà là yêu cầu POST, vì dữ liệu sản phẩm sẽ được gửi đến máy chủ, và chúng ta sẽ lưu trữ chúng ở đó.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó mở tệp server.js. Tìm trong đó mảng handlers và thêm vào nó một trình xử lý nữa cho yêu cầu POST. Ở đây chúng ta sẽ nhận cả phần thân của yêu cầu, vì vậy trong callback chúng ta phải truyền request:

http.post('/fakeServer/products', async ({ request }) => {})

Bây giờ, trong dấu ngoặc nhọn, hãy viết mã cho callback của chúng ta. Trước tiên, hãy trích xuất dữ liệu yêu cầu và trong trường hợp có lỗi, hãy gửi từ máy chủ một phản hồi rằng chúng ta không thể lưu dữ liệu và trạng thái 500:

http.post('/fakeServer/products', async ({ request }) => {
	const data = await request.json()

	if (data.content === 'error') {
		await delay(ARTIFICIAL_DELAY_MS)
		
		return new HttpResponse('server save error', {
			status: 500,
			headers: {
				'Content-Type': 'application/json',
			},
		})
	}
})

Nếu dữ liệu ổn, thì trong cơ sở dữ liệu chúng ta sẽ tìm người bán theo id đã gửi đến trong yêu cầu và ghi người bán này vào data (dữ liệu người bản tất nhiên cũng được lưu trữ trên máy chủ của chúng ta ;) ):

const seller = db.seller.findFirst({
	where: { id: { equals: data.seller } },
})
data.seller = seller

Tiếp theo, trong cơ sở dữ liệu, hãy tạo cho sản phẩm này một đối tượng phản ứng. Và bây giờ, có đầy đủ các trường cần thiết cho sản phẩm, hãy tạo trong cơ sở dữ liệu chính sản phẩm đó:

data.reactions = db.reaction.create()
const product = db.product.create(data)

Hãy thêm độ trễ và ở dòng mã cuối cùng cho callback của chúng ta, trả về phản hồi với sản phẩm:

await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

Đến đây, chúng ta đã hoàn toàn kết thúc với máy chủ và sẽ không quay lại nó nữa.

Nhân tiện, một điều hữu ích nữa. Sau dòng export const worker = setupWorker(...handlers) bạn có thể thêm mã sau:

worker.listHandlers().forEach((handler) => {
	console.log(handler.info.header)
})

Và bây giờ bạn có thể xem kết quả kích hoạt của từng trình xử lý trong bảng điều khiển của trình duyệt.

Tất nhiên, máy chủ của chúng ta không phải là thật và nếu chúng ta buộc phải làm mới trang trong trình duyệt, thì tất cả các đối tượng sản phẩm mới của chúng ta sẽ biến mất.

Hãy mở ứng dụng sinh viên của bạn. Mở trong đó tệp server.js. Thêm vào mảng handlers việc xử lý yêu cầu POST. Trong phần thân của yêu cầu này, bạn sẽ nhận dữ liệu của sinh viên mới được thêm vào.

Trong phần thân callback cho http.post của bạn, hãy giải nén dữ liệu và trong trường hợp có lỗi, hãy gửi phản hồi tương ứng.

Nếu mọi thứ đều ổn, thì hãy tìm trong cơ sở dữ liệu giảng viên theo id nhận được và ghi họ vào dữ liệu. Cũng hãy ghi vào dữ liệu, đối tượng votes được tạo dựa trên cơ sở dữ liệu.

Dựa trên dữ liệu đã thu thập, hãy tạo đối tượng student với sinh viên mới và gửi nó trong phản hồi của máy chủ.