การส่งข้อมูลจากเซิร์ฟเวอร์ผ่าน GET request ใน Redux

ดังนั้นเรามีฐานข้อมูลพร้อมข้อมูลแล้ว สิ่งแรกที่ เราจะทำเมื่อเริ่มต้นแอปพลิเคชัน Redux ของเรา - คือการรับข้อมูลผลิตภัณฑ์จากเซิร์ฟเวอร์ เพื่อทำสิ่งนี้ เราจำเป็นต้องส่ง GET request จากแอปพลิเคชันของเรา มาจัดการมันที่ฝั่งเซิร์ฟเวอร์กัน

เปิดแอปพลิเคชันผลิตภัณฑ์ของเรา และในนั้นเปิดไฟล์ server.js เพื่อที่จะ ทำงานกับ HTTP requests เราต้อง นำเข้าเครื่องมือหลายอย่าง จาก msw มาไว้ในไฟล์ มาทำกัน:

import { http, HttpResponse, delay } from 'msw'

และก็ปรับให้ใกล้เคียงความเป็นจริงทันที นั่นคือความล่าช้าที่อาจเกิดขึ้นในเครือข่าย ให้ ค่าความล่าช้าที่เราสร้างขึ้นนี้ เป็น 2 วินาที เพื่อให้เราเห็นว่า ข้อมูลถูกโหลดอย่างไร เขียนมันหลังจาก const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

และตอนนี้ ท้ายไฟล์ ก่อนส่งออก worker ให้สร้างอาร์เรย์สำหรับ API handler ของ requests:

export const handlers = []

จากนั้นในวงเล็บเหลี่ยม เขียน handler แรกสำหรับการดักจับ GET request ผลิตภัณฑ์:

export const handlers = [http.get()]

พารามิเตอร์แรกสำหรับ http.get เราจะส่ง ที่อยู่ปลอมมา เช่น '/fakeServer/products' และพารามิเตอร์ที่สองเป็น asynchronous callback:

export const handlers = [http.get('/fakeServer/products', async () => {})]

ตอนนี้มาเขียนโค้ดสำหรับ callback นี้ ด้วย มันเราจะดึงผลิตภัณฑ์ทั้งหมดออกจากฐานข้อมูล ที่นี่เรายังใช้ฟังก์ชัน serializeProduct ซึ่งเราเขียนโค้ด ไว้ในบทเรียนที่แล้ว มาส่งผ่าน มันเข้าไปใน map จากนั้นสร้างความล่าช้า (ให้รู้สึกว่า เครือข่ายช้า) และคืนค่าใน response เป็นออบเจ็กต์ พร้อมข้อมูลผลิตภัณฑ์ในรูปแบบ JSON:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

และสุดท้าย เราเขียน handler แรก สำหรับ worker ของเราแล้ว มาให้ worker นี้ อาร์เรย์ handlers กัน โดยแก้ไขบรรทัดสุดท้าย ของโค้ดในไฟล์เป็น:

export const worker = setupWorker(...handlers)

เปิดแอปพลิเคชันนักเรียนของคุณ และในนั้นเปิดไฟล์ server.js นำเข้า เครื่องมือที่ระบุจาก msw มาที่ไฟล์ หลังจากศึกษาบทเรียนนี้แล้ว ให้สร้าง อาร์เรย์ว่างของ handler สำหรับ การดักจับ requests เขียนโค้ดในนั้น สำหรับ handler ของ GET request นักเรียน ให้เส้นทางของคุณเป็น '/fakeServer/students'

ท้ายไฟล์ อย่าลืมส่งผ่าน อาร์เรย์ของ handler handlers ให้กับ worker