Pemasangan msw untuk Berkerja dengan Bahagian Pelayan dalam Redux

Dalam pelajaran sebelumnya, kami telah membuat beberapa perubahan tambahan dalam aplikasi kami. Sekarang kami perlu memahami pelayan, yang akan digunakan oleh aplikasi kami untuk berkomunikasi data.

Kami tidak akan mempunyai pelayan sebenar, jadi kami hanya akan mensimulasikan kerja dengannya, menggunakan alat hebat Mock Service Worker. Mock Service Worker (MSW) ialah alat untuk mensimulasikan API, yang menggunakan API Pekerja Perkhidmatan yang distandardkan, direka untuk memintas permintaan pada tahap rangkaian. MSW akan menjana respons palsu (responses) kepada permintaan kami (requests). Lebih-lebih lagi, seperti yang dinyatakan oleh pemaju, alat ini sangat berkesan dan fleksibel sehingga selepas menyahpepijat dengan mock (yang mana dalam aplikasi tidak memerlukan apa-apa khas untuk dicipta), aplikasi boleh dilancarkan untuk bekerja dengan pelayan luaran yang sebenar. Dokumentasi untuknya agak luas, dan, jika anda berminat dengan MSW, anda boleh membacanya di laman web rasmi.

Mari kita beralih kepada pemasangan msw. Untuk ini, buka projek produk kami dan dalam terminal taip:

npm install msw --save-dev

Untuk msw berfungsi, kami juga perlu mencipta dan menyalin mockServiceWorker.js ke dalam beberapa direktori awam. Selalunya ia adalah folder public. Kami mempunyai folder kosong public, mari salin fail itu ke sana. Untuk ini, jalankan dalam terminal perintah dan kemudian setuju untuk menggunakan public:

npx msw init public

Sekarang lihat dalam public, sepatutnya muncul skrip yang dijana mockServiceWorker.js. Sekarang jalankan aplikasi produk kami dan dalam bar alamat penyemak imbas taip http://localhost:5173/mockServiceWorker.js (kerana aplikasi kami berjalan pada port 5173). Nampakkah dalam tetingkap penyemak imbas kandungan fail mockServiceWorker.js dipaparkan? Bermakna semuanya hebat, mari teruskan.

Seterusnya mari dalam folder src buat folder api, dan di dalamnya fail server.js, di mana kami akan menulis kod pelayan. Sekarang buka server.js dan import ke dalamnya fungsi setupWorker dari perpustakaan msw yang dipasang:

import { setupWorker } from 'msw/browser'

Di bawah dalam fail, buat pembolehubah worker dan eksportnya:

export const worker = setupWorker()

Dan sekarang mari buka fail main.jsx dan import worker kami ke dalamnya:

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

Sekarang sambungkannya kepada aplikasi kami. Untuk ini, kod yang kami gunakan untuk mencipta akar aplikasi React kami, kami akan bungkus dalam fungsi, namakan ia main dan baris pertama tambahkan padanya fungsi permulaan untuk worker. Sudah tentu jangan lupa untuk memanggil main itu sendiri. Kod penuh selepas semua baris dengan import kini akan kelihatan seperti ini:

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

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

main()

Sekarang kami yakin bahawa aplikasi kami tidak akan mula berfungsi lebih awal (dan menghantar permintaan ;) ), daripada worker bermula.

Mari jalankan aplikasi kami dan buka dalam penyemak imbas konsol untuk pemaju. Jika anda melihat teks '[MSW] Mocking enabled.' di dalamnya, maka anda hebat dan telah memasang semuanya dengan betul!!!

Buka aplikasi anda dengan pelajar. Setelah membiasakan diri dengan bahan pelajaran ini, pasang Mock Service Worker untuk aplikasi anda.

Buat fail server.js, dan di dalamnya buat worker. Sambungkan worker ke aplikasi dalam main.js, seperti yang ditunjukkan dalam pelajaran. Pastikan semua berfungsi.