การจัดการคำขอ POST ที่ส่งโดยใช้ thunk ใน Redux

เราได้รับข้อมูลผลิตภัณฑ์และผู้ขายจากเซิร์ฟเวอร์และแสดงผลในแอปพลิเคชันแล้ว แต่การใช้ thunk ไม่ได้มีไว้เพื่อรับข้อมูลเพียงอย่างเดียว เรายังสามารถส่งข้อมูลได้ด้วย มาดูกันว่าทำได้อย่างไร

หลังจากที่เราเพิ่มผลิตภัณฑ์ใหม่แล้ว มันยังคงอยู่ใน store ของเรา ซึ่งก็คือภายในแอปพลิเคชันของเรา ลองมาทำให้ผลิตภัณฑ์ใหม่ถูกบันทึกลงบนเซิร์ฟเวอร์กัน

มาเริ่มกันที่เซิร์ฟเวอร์ ตรงนี้เราจะต้องจัดการกับคำขอที่ไม่ใช่ GET แต่เป็นคำขอ POST เนื่องจากข้อมูลผลิตภัณฑ์จะถูกส่งมายังเซิร์ฟเวอร์ และเราจะบันทึกข้อมูลนั้นไว้ที่นั่น

เปิดแอปพลิเคชันผลิตภัณฑ์ของเรา และในนั้นเปิดไฟล์ server.js หาอาร์เรย์ handlers และเพิ่มตัวจัดการอีกหนึ่งตัวสำหรับคำขอ POST ตรงนี้เราจะรับ body ของคำขอด้วย ดังนั้นใน callback เราต้องส่ง request ไป:

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

ตอนนี้ในวงเล็บปีกกา ให้เขียนโค้ด callback ของเรา เริ่มต้นด้วยการดึงข้อมูลคำขอ และในกรณีที่เกิดข้อผิดพลาด ให้ส่งการตอบกลับจากเซิร์ฟเวอร์ว่าเราไม่สามารถบันทึกข้อมูลได้ พร้อมกับสถานะ 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',
			},
		})
	}
})

หากข้อมูลเป็นปกติ เราจะค้นหาผู้ขายในฐานข้อมูลตาม id ที่ส่งมากับคำขอ และเขียนผู้ขายนั้นลงใน data (ข้อมูลผู้ขายของเราก็เก็บไว้บนเซิร์ฟเวอร์เช่นกัน ;) ):

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

ถัดไป ในฐานข้อมูล ให้สร้างอ็อบเจกต์สำหรับปฏิกิริยาสำหรับผลิตภัณฑ์นี้ และตอนนี้ เมื่อมีฟิลด์ที่จำเป็นทั้งหมดสำหรับผลิตภัณฑ์แล้ว ให้สร้างตัวผลิตภัณฑ์เองในฐานข้อมูล:

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

ตั้งค่าการหน่วงเวลา และในบรรทัดสุดท้ายของโค้ดสำหรับ callback ของเรา ให้ส่งคืนการตอบกลับพร้อมผลิตภัณฑ์:

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

ตรงนี้เราเสร็จสิ้นกับเซิร์ฟเวอร์โดยสมบูรณ์ และจะไม่กลับมาที่นี้อีก

อีกสิ่งหนึ่งที่มีประโยชน์ หลังจากบรรทัด export const worker = setupWorker(...handlers) คุณสามารถเพิ่มโค้ดต่อไปนี้:

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

และตอนนี้คุณจะสามารถเห็นผลลัพธ์ของการทำงานของตัวจัดการแต่ละตัวในคอนโซลเบราว์เซอร์

แน่นอนว่าเซิร์ฟเวอร์ของเราไม่ใช่ของจริง และหากเรารีเฟรชหน้าในเบราว์เซอร์โดยตรง อ็อบเจกต์ใหม่ทั้งหมดที่มีผลิตภัณฑ์ของเราจะหายไป

เปิดแอปพลิเคชันนักเรียนของคุณ เปิดไฟล์ server.js ในนั้น เพิ่มการจัดการคำขอ POST ลงในอาร์เรย์ handlers ใน body ของคำขอนี้คุณจะรับข้อมูลของนักเรียนใหม่ที่เพิ่มเข้ามา

ใน body ของ callback สำหรับ http.post ของคุณ ให้ดึงข้อมูลออกมา และในกรณีที่เกิดข้อผิดพลาด ให้ส่งการตอบกลับที่เหมาะสม

หากทุกอย่างโอเค ให้ค้นหาอาจารย์ในฐานข้อมูลตาม id ที่ได้รับ และเขียนลงในข้อมูล รวมถึงเขียนอ็อบเจกต์ votes ที่สร้างจากฐานข้อมูลลงในข้อมูลด้วย

จากข้อมูลที่รวบรวมไว้ ให้สร้างอ็อบเจกต์ student พร้อมนักเรียนใหม่ และส่งคืนในคำตอบของเซิร์ฟเวอร์