การติดตั้ง msw สำหรับการทำงานกับฝั่งเซิร์ฟเวอร์ใน Redux

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

เราจะไม่มีเซิร์ฟเวอร์จริง ดังนั้นเราจะจำลองการทำงานกับเซิร์ฟเวอร์โดยใช้เครื่องมือที่ยอดเยี่ยมอย่าง Mock Service Worker Mock Service Worker (MSW) เป็นเครื่องมือสำหรับจำลอง API ซึ่งใช้ API มาตรฐานของ Service Worker ที่ออกแบบมาเพื่อดักจับคำขอในระดับเครือข่าย MSW จะสร้างการตอบกลับแบบจำลอง (responses) ต่อคำขอ (requests) ของเรา ยิ่งไปกว่านั้น ตามที่ผู้พัฒนาระบุ เครื่องมือนี้มีประสิทธิภาพและยืดหยุ่นมาก หลังจากการดีบั๊กกับม็อก (ซึ่งไม่จำเป็นต้องสร้างอะไรพิเศษในแอปพลิเคชัน) แอปพลิเคชันสามารถเริ่มทำงานกับเซิร์ฟเวอร์ภายนอกจริงได้เลย เอกสารประกอบค่อนข้างกว้างขวาง และหากคุณสนใจใน MSW คุณสามารถอ่านได้จากเว็บไซต์ทางการ

มาดูการติดตั้ง msw กันดีกว่า สำหรับการนี้ ให้เปิดโปรเจกต์สินค้าของเราและในเทอร์มินัลป้อน:

npm install msw --save-dev

สำหรับการทำงานของ msw เรายังต้องสร้างและคัดลอกไฟล์ mockServiceWorker.js ไปยังไดเรกทอรีสาธารณะที่ไหนสักแห่ง มักจะเป็นโฟลเดอร์ public เรามี โฟลเดอร์ public ว่างอยู่ มาคัดลอก มันไปที่นั่นกัน สำหรับการนี้ ให้รันในเทอร์มินัล คำสั่งและจากนั้นยอมรับการใช้ public:

npx msw init public

ตอนนี้มาดูใน public ตรงนั้นควรจะปรากฏ สคริปต์ที่ถูกสร้างขึ้น mockServiceWorker.js ตอนนี้ มาเริ่มแอปพลิเคชันสินค้าของเราและในแถบที่อยู่ เบราว์เซอร์ป้อน http://localhost:5173/mockServiceWorker.js (เนื่องจากแอปพลิเคชันของเราทำงานบนพอร์ต 5173) เห็นไหมในหน้าต่างเบราว์เซอร์แสดงเนื้อหา ของไฟล์ mockServiceWorker.js? นั่นหมายความว่าดีมาก, ไปต่อกันเลย

ถัดไป สร้างโฟลเดอร์ในโฟลเดอร์ src api และในนั้นสร้างไฟล์ server.js ซึ่ง เราจะเขียนโค้ดเซิร์ฟเวอร์ ตอนนี้เปิด server.js และนำเข้าไปยังนั้นฟังก์ชัน setupWorker จากไลบรารี msw ที่ติดตั้งแล้ว:

import { setupWorker } from 'msw/browser'

ด้านล่างในไฟล์ สร้างตัวแปร worker และส่งออกมัน:

export const worker = setupWorker()

และตอนนี้มาเปิดไฟล์ main.jsx และนำเข้า worker ของเราไปยังนั้น:

import { worker } from './api/server'

ตอนนี้มาต่อมันเข้ากับแอปพลิเคชันของเรา สำหรับ การนี้ โค้ดที่เราใช้สร้างรูท ของแอปพลิเคชัน React ของเรา เราจะห่อมันในฟังก์ชัน เรียกมันว่า main และเพิ่มเข้าไปในนั้นบรรทัดแรกฟังก์ชัน เริ่มต้นสำหรับ worker แน่นอนอย่าลืม เรียก main ด้วย โค้ดเต็มหลังจากทั้งหมด บรรทัดด้วยการนำเข้าตอนนี้จะมีลักษณะ ดังนี้:

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

ตอนนี้เราแน่ใจแล้วว่าแอปพลิเคชันของเรา จะไม่เริ่มทำงานก่อน (และส่งคำขอ ;) ) กว่า worker จะเริ่มทำงาน

มาเริ่มแอปพลิเคชันของเราและเปิด เบราว์เซอร์คอนโซลสำหรับนักพัฒนากัน หาก คุณเห็นในนั้นข้อความ '[MSW] Mocking enabled.' แสดงว่าคุณเยี่ยมมากและติดตั้งทุกอย่างถูกต้อง!!!

เปิดแอปพลิเคชันนักเรียนของคุณ หลังจากศึกษาเนื้อหาของบทเรียนนี้แล้ว ให้ติดตั้ง Mock Service Worker สำหรับ แอปพลิเคชันของคุณ

สร้างไฟล์ server.js และในนั้นสร้าง worker ต่อ worker เข้ากับแอปพลิเคชันใน main.js ดังที่แสดงในบทเรียน ตรวจสอบให้แน่ใจ ว่าทุกอย่างทำงานได้