Instalarea msw pentru lucrul cu partea de server în Redux

În lecțiile anterioare am făcut câteva modificări suplimentare în aplicația noastră. Acum trebuie să ne ocupăm de serverul cu care aplicația noastră va face schimb de date.

Nu vom avea un server real, așa că vom simula pur și simplu lucrul cu el, folosind un instrument grozav Mock Service Worker. Mock Service Worker (MSW) este un instrument pentru simularea API-ului, care folosește un API standardizat Service Worker, destinat interceptării cererilor la nivelul rețelei. MSW va genera răspunsuri false (responses) la cererile noastre (requests). Și, după cum susțin dezvoltatorii, instrumentul este atât de eficient și flexibil, încât după depanarea cu mock-uri (pentru care în aplicație nu este necesar să se creeze nimic special), aplicația poate fi pusă în funcțiune cu un server extern real. Documentația este destul de extinsă și, dacă vă interesați de MSW, o puteți citi pe site-ul oficial.

Să trecem la instalarea msw. Pentru aceasta deschidem proiectul nostru cu produsele și în terminal introducem:

npm install msw --save-dev

Pentru ca msw să funcționeze, trebuie de asemenea să creăm și să copiem mockServiceWorker.js într-un director public. Deseori acesta este folderul public. Noi avem un folder gol public, să copiem fișierul acolo. Pentru aceasta rulați în terminal comanda și apoi acceptați utilizarea lui public:

npx msw init public

Acum să ne uităm în public, acolo ar trebui să apară scriptul generat mockServiceWorker.js. Acum pornim aplicația noastră cu produse și în bara de adresă a browserului introducem http://localhost:5173/mockServiceWorker.js (deoarece aplicația noastră rulează pe portul 5173). Vedeți în fereastra browserului s-a afișat conținutul fișierului mockServiceWorker.js? Înseamnă că totul este minunat, mergem mai departe.

În continuare să creăm în folderul src folderul api, iar în el fișierul server.js, în care vom scrie codul serverului. Acum deschidem server.js și importăm în el funcția setupWorker din biblioteca msw instalată:

import { setupWorker } from 'msw/browser'

Mai jos în fișier creăm variabila worker și o exportăm:

export const worker = setupWorker()

Iar acum să deschidem fișierul main.jsx și să importăm workerul nostru în el:

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

Acum să-l conectăm la aplicația noastră. Pentru aceasta, codul cu care creăm rădăcina aplicației noastre React, îl vom înfășura într-o funcție, o vom numi main și prima linie o vom adăuga în ea funcția de pornire pentru worker. Bineînțeles, nu vom uita să apelăm și însuși main. Codul complet după toate liniile cu importul va arăta acum astfel:

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

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

main()

Acum suntem siguri că aplicația noastră nu va începe să funcționeze înainte (și să trimită cereri ;) ), decât va porni workerul.

Să pornim aplicația noastră și să deschidem în browser consola pentru dezvoltatori. Dacă vedeți în ea textul '[MSW] Mocking enabled.', atunci sunteți grozavi și ați instalat totul corect!!!

Deschideți aplicația voastră cu studenții. Urmărind materialul acestei lecții, instalați Mock Service Worker pentru aplicația dvs.

Creați fișierul server.js, iar în el creați un worker. Conectați workerul la aplicație în main.js, așa cum este arătat în lecție. Asigurați-vă că totul funcționează.