Installasie van msw vir werk met die bedienerkant in Redux

In vorige lesse het ons 'n paar bykomende veranderinge in ons toepassing gemaak. Nou moet ons die bediener hanteer waarmee ons toepassing data sal uitruil.

Ons sal nie 'n werklike bediener hê nie, so ons sal eenvoudig die werk daarmee naboots deur die gawe instrument Mock Service Worker te gebruik. Mock Service Worker (MSW) is 'n instrument vir die nabootsing van API's wat 'n gestandaardiseerde Service Worker API gebruik, ontwerp om versoeke op die netwerkvlak te onderskep. MSW sal fop antwoorde (responses) op ons versoeke (requests) genereer. Trouens, volgens die ontwikkelaars is die instrument so doeltreffend en buigsaam dat na die ontfouting met mocks (waarvoor niks spesifaaks in die toepassing geskep hoef te word nie), die toepassing in produksie gestuur kan word met 'n werklike eksterne bediener. Die dokumentasie daaroor is redelik uitgebrei, en as jy in MSW belangstel, kan jy dit lees op die amptelike webwerf.

Kom ons gaan voort na die installasie van msw. Om dit te doen, maak ons ons produkprojek oop en tik in die terminaal:

npm install msw --save-dev

Vir msw om te werk moet ons ook die mockServiceWorker.js skep en kopieer na een of ander publieke gids. Dikwels is dit die gids public. Ons het 'n leë gids public, kom ons kopieer dit daarin. Om dit te doen, voer in die terminaal die opdrag uit en stem dan in tot die gebruik van public:

npx msw init public

Nou kyk ons in public, daar behoort die gegenereerde skrip mockServiceWorker.js te verskyn. Nou laat ons ons produkte-toepassing loop en in die adresbalk van die blaaiër tik ons http://localhost:5173/mockServiceWorker.js (aangesien ons toepassing op poort 5173 loop). Sien jy die inhoud van die lêer in die blaaivenster? Mooi, alles is wonderlik, ons gaan voort.

Volgende, laat ons in die gids src 'n gids skep api, en daarin 'n lêer server.js, waarin ons die bedienerkode sal skryf. Nou maak ons server.js oop en importeer die funksie setupWorker van die geïnstalleerde msw-biblioteek:

import { setupWorker } from 'msw/browser'

Onder in die lêer skep ons 'n veranderlike worker en voer dit uit:

export const worker = setupWorker()

En nou laat ons die lêer main.jsx oopmaak en ons worker daarin invoer:

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

Nou koppel ons dit aan ons toepassing. Om dit te doen sal ons die kode waarmee ons die wortel van ons React-toepassing skep, in 'n funksie verpak, ons noem dit main en by die eerste reël voeg ons die beginfunksie vir die worker by. Natuurlik sal ons nie main self oproep nie. Die volledige kode na alle reëls met invoer sal nou so lyk:

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

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

main()

Nou is ons seker dat ons toepassing nie sal begin werk voor nie (en versoeke stuur ;) ), as wat die worker begin.

Laat ons ons toepassing begin en in die blaaiër die ontwikkelaarskonsole oopmaak. As jy die teks '[MSW] Mocking enabled.' daarin sien, dan is jy flink en het jy alles korrek geïnstalleer!!!

Maak jou studentetoepassing oop. Nadat jy die materiaal van hierdie les nagegaan het, installeer Mock Service Worker vir jou toepassing.

Skep 'n lêer server.js, en skep daarin 'n worker. Koppel die worker aan die toepassing in main.js, soos in die les gewys. Maak seker dat alles werk.