MSW:n asentaminen palvelinpuolen työskentelyyn Reduxissa

Edellisillä oppitunneilla teimme useita lisämuutoksia sovelluksessamme. Nyt meidän on selvitettävä palvelimesta, jota sovelluksemme tulee käyttämään datan vaihtamiseen.

Meillä ei ole oikeaa palvelinta, joten me simuloimme yksinkertaisesti työskentelyn kanssa, käyttämällä siistiä työkalua Mock Service Worker. Mock Service Worker (MSW) on API:n simuloimisen työkalu, joka käyttää standardoitua Service Worker -API:ta, suunniteltu sieppaamaan kyselyjä verkkotasolla. MSW tulee generaamaan valevastauksia (responses) meidän kyselyihimme (requests). Ja, kuten kehittäjät väittävät, työkalu on niin tehokas ja joustava, että debuggaamisen jälkeen mockien kanssa (jotka sovelluksessa ei tarvitse luoda erikseen), sovellus voidaan laittaa toimintaan jo oikean ulkoisen palvelimen kanssa. Dokumentaatio sitä varten on melko laaja, ja jos kiinnostut MSW:stä, voit lukea siitä viralliselta verkkosivustolta.

Siirrytään asentamaan msw. Varten tämän avaamme projektimme tuotteiden kanssa ja terminaalissa syötämme:

npm install msw --save-dev

Jotta msw toimii, meidän on myös luotava ja kopioitava mockServiceWorker.js johonkin julkiseen hakemistoon. Usein se on kansio public. Meillä on tyhjä kansio public, kopioidaan se sinne. Varten tämä käynnistä terminaalissa komento ja sitten hyväksy käyttö public:

npx msw init public

Nyt katsotaan public, sinne pitäisi ilmestyä generoitu skripti mockServiceWorker.js. Nyt käynnistetään sovelluksemme tuotteiden kanssa ja osoiteriville selain syötämme http://localhost:5173/mockServiceWorker.js (koska sovelluksemme toimii 5173 portissa). Näetkö selainikkunassa näytettiin sisältö tiedostosta mockServiceWorker.js? Tarkoittaa kaikki hienosti, mennään eteenpäin.

Seuraavaksi luodaan kansioon src kansio api, ja siellä tiedosto server.js, jossa kirjoitamme palvelimen koodia. Nyt avataan server.js ja tuodaan siihen funktio setupWorker asennetusta msw-kirjastosta:

import { setupWorker } from 'msw/browser'

Alapuolelle tiedostoon luomme muuttujan worker ja viemme sen:

export const worker = setupWorker()

Ja nyt avataan tiedosto main.jsx ja tuodaan siihen workerimme:

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

Nyt liitetään se sovellukseemme. Varten tämä koodi, jolla luomme juuren React-sovelluksestamme, käärimme funktioon, nimetään se main ja ensimmäisellä rivillä lisätään siihen funktio käynnistys workerille. Tietenkin emme unohda kutsua ja itse main. Täysi koodi kaikkien rivien jälkeen tuontien näyttää nyt tältä:

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

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

main()

Nyt olemme varmoja, että sovelluksemme ei ala toimia ennen (ja lähettää kyselyjä ;) ), kuin worker käynnistyy.

Käynnistetään sovelluksemme ja avataan selain kehittäjäkonsoli. Jos näet siinä tekstin '[MSW] Mocking enabled.', niin olet huippu ja asensit kaiken oikein!!!

Avaa sovelluksesi opiskelijoiden kanssa. Tutkittuasi tämän oppitunnin materiaalin, asenna Mock Service Worker sovellukseesi.

Luo tiedosto server.js, ja siinä luo worker. Liitä worker sovellukseen main.js:ssa, kuten oppitunnilla näytetään. Varmista, että kaikki toimii.