Pemprosesan Permintaan POST yang Dihantar Menggunakan Thunk dalam Redux

Kita telah mendapat data produk dan penjual dari pelayan dan memaparkannya dalam aplikasi. Tetapi dengan menggunakan thunk, kita boleh bukan sahaja mendapatkan, malah menghantar data. Mari kita pelajari cara untuk melakukannya.

Selepas kita menambah produk baru, ia kekal dalam store kita, iaitu di dalam aplikasi kita. Mari kita buat supaya produk baru disimpan di pelayan.

Mari kita mulakan dengan pelayan. Di sini kita perlu memproses bukan GET, tetapi permintaan POST, kerana data produk sekarang akan dihantar ke pelayan, dan kita akan menyimpannya di sana.

Buka aplikasi produk kita, dan dalamnya fail server.js. Cari array handlers di dalamnya dan tambah satu lagi pemproses untuk permintaan POST. Di sini kita akan menerima badan permintaan juga, oleh itu dalam callback kita mesti luluskan request:

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

Sekarang dalam kurungan keriting tulis kod callback kita. Mula-mula, ekstrak data permintaan dan sekiranya berlaku ralat hantar dari pelayan sambungan yang mengatakan kita gagal 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 adalah baik, maka kita dalam pangkalan data akan cari penjual berdasarkan id, yang datang dalam permintaan dan masukkan penjual ini ke dalam data (data penjual juga disimpan di pelayan kita ;) ):

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

Seterusnya, dalam pangkalan data, kita akan buat untuk produk ini objek dengan reaksi. Dan sekarang, dengan mempunyai semua medan yang diperlukan untuk produk, cipta dalam pangkalan data produk itu sendiri:

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

Letakkan kelewatan dan dalam baris kod terakhir untuk callback kita kembalikan sambungan dengan produk:

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

Pada ketika ini, kita telah selesai sepenuhnya dengan pelayan dan tidak akan kembali kepadanya.

By the way, satu lagi perkara yang berguna. Selepas baris export const worker = setupWorker(...handlers) anda boleh tambah kod berikut:

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

Dan sekarang anda boleh melihat hasil setiap pemproses yang dijalankan dalam konsol pelayar.

Sudah tentu pelayan kita bukan yang sebenar dan jika kita secara paksa menyegarkan halaman dalam pelayar, semua objek baru kita dengan produk akan hilang.

Buka aplikasi anda dengan pelajar. Buka fail server.js di dalamnya. Tambahkan ke dalam array handlers pemprosesan untuk permintaan POST. Dalam badan permintaan ini, anda akan menerima data pelajar baru yang ditambah.

Dalam badan callback untuk http.post anda, uraikan data dan sekiranya berlaku ralat, hantar sambungan yang sesuai.

Jika semuanya ok, maka cari dalam pangkalan data pensyarah berdasarkan id yang diterima dan masukkan beliau ke dalam data. Juga masukkan ke dalam data, objek votes yang dicipta berdasarkan pangkalan data.

Berdasarkan data yang dikumpulkan, cipta objek student dengan pelajar baru dan hantarnya dalam sambungan pelayan.