Redux bilen işlemek üçin msw gurnamak

Öňki sapaklarda biz aplikasiýamyzda birnäçe goşmaça üýtgeşiklikler etdik. Indi biz aplikasiýamyzyň maglumat çalşyjak serweri bilen işlemeli.

Hakyky serwerimiz bolmajak, şonuň üçin biz onuň işini ṣaplamak üçin ṣowat gural Mock Service Worker-y ulanyp bilem. Mock Service Worker (MSW) - API ṣaplamak üçin gural bolup, ulanyjy standartlaşdyrylan Service Worker API-y bilen, tor sewiýesinde haýyşlary tutmak üçin niýetlenendir. MSW bizim haýyşlarymyza ṣapa jogap döreder. Üýtge, ṣaly öndürijiler aýdyp geçişi ýaly, bu gural şeýle netijeli we çeýeliki, ṣapa modeller bilen sazlama işlerinden soň (aplikasiýada hiç hili ýörite zat döretmek zerur däl), aplikasiýa hakyky daşarky serwer bilen işe girizip bolýar. Onuň resminaması ãtiỳarly giň, we, eger siz MSW bilen gyzyklansanyňyz, ony resmi sahypasında okap bilersiňiz.

Geliň, msw gurnamaga geçeliň. Munuň üçin önümler bar proýekti açarys we terminala ýazarys:

npm install msw --save-dev

msw-nuň işlemegi üçin biz ṣem ṣypatly mockServiceWorker.js faýlyny döretmeli we nãhili bir umumy kataloga göçürmeli. Köplenç bu public bukjasydyr. Bizde boş public bukjasy bar, geliň, oňa göçüreliň. Munuň üçin terminalda bu buýrugy çalşyryň we soňra public ulanylmagyna razy boluň:

npx msw init public

Indi public bukjasyna serediň, onda döredilen skript mockServiceWorker.js peýda bolmalydyr. Indi önümler bar aplikasiýamyzy işledeliň we brauzeriň salgy setirine http://localhost:5173/mockServiceWorker.js ýazalyň (sebäbi aplikasiýamyz 5173 portunda işleýär). Brauzeriň penjiresinde faýlyň mazmuny mockServiceWorker.js görünýärmi? Demek, hemmesi gowy, dowam edeliň.

Indiki etmeli işimiz, src bukjasynyň içinde api bukjasyny döretmek, we onuň içinde server.js faýlyny döretmek, onuň içinde serweriň kodyny ýazarys. Indi server.js faýlyny açarys we onuň içine setupWorker funksiýasyny import ederis, gurnal msw kitaphanasyndan:

import { setupWorker } from 'msw/browser'

Aşakda faýlyň içinde worker üýtgeýjisini dörederis we ony eksport ederis:

export const worker = setupWorker()

Indi bolsa main.jsx faýlyny açalyň we onuň içine öz worker-imizi import edeliň:

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

Indi ony aplikasiýamyza birikdireris. Munuň üçin React aplikasiýamyzyň kökünü döredýän kody, biz funksiýa içine ýerleşdireris, oňa main diýip at berlisiň we birinji setir hökmünde oňa worker-i işletmek üçin funksiýa goşmaly. Elbetde, main funksiýasyny özümi hem çagyrmagy ýatdan çykarmaly. Import setirlerinden soňky doly kod indi şeýle görüner:

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

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

main()

Indi biz ynamly bileris, aplikasiýamyz işe başlamaz (we haýyş ibermez ;) ), worker işe başlamanka.

Geliň, aplikasiýamyzy işledeliň we brauzerde ösdürijiler üçin konsoly açalyň. Eger siz onda '[MSW] Mocking enabled.' teksti görýän bolsaňyz, onda siz ýagşy we hemmesini dogry gurnadyňyz!!!

Şagytlar bar aplikasiýaňyzy açyň. Bu sapagyň materialy bilen tanyşanyňyzdan soň, Mock Service Worker-y aplikasiýaňyz üçin gurnaň.

server.js faýlyny dörediň, we onuň içinde worker dörediň. Worker-i aplikasiýaňyza main.js faýlynda birikdiriň, sapakda görkezilişi ýaly. Hemmesiniň işleýändigine göz ýetiriň.