Memproses Permintaan POST yang Dikirim Menggunakan Thunk di Redux

Kita telah mendapatkan data produk dan penjual dari server dan menampilkannya di aplikasi. Tetapi dengan thunk, kita tidak hanya bisa mendapatkan, tetapi juga mengirim data. Mari kita pelajari cara melakukannya.

Setelah kita menambahkan produk baru, produk tersebut tetap berada di store kita, yaitu di dalam aplikasi kita. Mari kita buat agar produk baru disimpan di server.

Mari kita mulai dari server. Di sini kita harus menangani bukan permintaan GET, melainkan permintaan POST, karena ke server sekarang akan masuk data produk, yang akan kita simpan di sana.

Buka aplikasi kita dengan produk, dan di dalamnya file server.js. Temukan di dalamnya array handlers dan tambahkan satu lagi handler untuk permintaan POST. Di sini kita akan menerima body permintaan juga, oleh karena itu dalam callback kita harus meneruskan request:

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

Sekarang dalam kurung kurawal tulis kode callback kita. Pertama-tama, ekstrak data permintaan dan dalam kasus error kirim dari server tanggapan bahwa kita tidak dapat menyimpan data dan status 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',
			},
		})
	}
})

Jika data baik-baik saja, maka di basis data kita akan temukan penjual berdasarkan id, yang datang dalam permintaan dan tulis penjual ini ke dalam data (data penjual juga disimpan di server kita ;) ):

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

Selanjutnya di basis data buat untuk produk ini objek dengan reaksi. Dan sekarang, dengan memiliki semua field yang diperlukan untuk produk, buat di basis data produk itu sendiri:

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

Atur delay dan di baris kode terakhir untuk callback kita kembalikan tanggapan dengan produk:

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

Di sini kita sepenuhnya selesai dengan server dan tidak akan kembali lagi.

Ngomong-ngomong, satu hal berguna lagi. Setelah baris export const worker = setupWorker(...handlers) anda dapat menambahkan kode berikut:

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

Dan sekarang anda dapat melihat hasil trigger setiap handler di konsol browser.

Tentu saja server kita tidak nyata dan jika kita secara paksa me-refresh halaman di browser, maka semua objek baru kita dengan produk akan hilang.

Buka aplikasi anda dengan siswa. Buka di dalamnya file server.js. Tambahkan ke array handlers penanganan permintaan POST. Dalam body permintaan ini anda akan menerima data siswa baru yang ditambahkan.

Dalam body callback untuk http.post anda unpack data dan dalam kasus error kirim tanggapan yang sesuai.

Jika semuanya ok, maka temukan di basis data pengajar berdasarkan id yang diterima dan tulis dia ke dalam data. Tulis juga ke dalam data, objek votes yang dibuat berdasarkan basis data.

Berdasarkan data yang dikumpulkan, buat objek student dengan siswa baru dan kirimkan dia dalam tanggapan server.