Ба Redux кор кардан бо қисми серверӣ MSW насб кардан

Дар дарсҳои гузашта мо чанд тағйироти иловагӣ дар барномаи худ анҷом додем. Ҳоло ба мо лозим аст, ки бо сервере, ки барномаи мо бо он мубодилаи маълумот хоҳад кард, шинос шавем.

Мо сервери воқеӣ надорем, аз ин рӯ мо танҳо кор бо онро бо истифода аз абзори аҷиб Mock Service Worker имитоза мекунем. Mock Service Worker (MSW) - абзорест барои имитозаи API, ки аз API стандартии Service Worker истифода мебарад, ки барои бастани дархостҳо дар сатҳи шабақа пешбинӣ шудааст. MSW посухҳои қалбакӣ (responses) ба дархостҳои мо (requests) тавлид хоҳад кард. Ва ҳамчунин, тавре ки таҳиягарон даъво мекунанд, абзор ба ҳамин дараҷа самаранок ва ҳамоҳангсоз аст, ки пас аз азҳои кардани бо макҳо (барои ки дар барнома ҳеҷ чизи махсус эҷод кардан лозим нест), барномаро метавон ба кор бо як сервери берунаи аслии аллакай оғоз кард. Ҳуҷҷатҳо дар бораи он хеле васеъ аст, ва агар шумо ба MSW таваҷҷуҳ дошта бошед, метавонед онҳоро дар сомонаи расмӣ хонед.

Биёед ба насби msw гузарем. Барои ин лоиҳаи худро бо маҳсулот кушода ва дар терминал ворид кунем:

npm install msw --save-dev

Барои кор кардани msw бамо низ лозим аст, ки эҷод карда ва нусхабардорӣ кардани mockServiceWorker.js ба ягон директорияи ҷамъиятӣ. Аксар вақт ин папкаи public аст. Мо папкаи холӣ public дорем, биёед онро ба он ҷо нусхабардорӣ кунем. Барои ин дар терминал фармонро оғоз кунед ва сипас розӣ шавед ба истифодаи public:

npx msw init public

Ҳоло ба public чашм бизанем, дар он ҷо бояд пайдо шавад скрипти тавлидшуда mockServiceWorker.js. Ҳоло барномаи худро бо маҳсулот оғоз кунед ва дар сатри суроғаи браузер ворид кунед http://localhost:5173/mockServiceWorker.js (зеро барномаи мо дар порти 5173 кор мекунад). Мевабинӣ дар равзанаи браузер мундариҷаи файли mockServiceWorker.js намоиш дода шуд? Пас ҳамааш хуб аст, пеш меравем.

Баъд биёед дар папкаи src папкаи api эҷод кунем, ва дар он файли server.js, ки дар он коди серверро нависем. Ҳоло server.js кушоед ва функсияи setupWorker аз китобхонаи насбшудаи msw-ро ба он ворид кунем:

import { setupWorker } from 'msw/browser'

Дар поин дар файл тағирёбандаи worker эҷод кунем ва онро содир кунем:

export const worker = setupWorker()

Ва ҳоло биёед файли main.jsx кушоем ва коргари худро ба он ворид кунем:

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

Ҳоло онро ба барномаи худ васл кунем. Барои ин код, ки бо ёрии он решаи барномаи React-и мо эҷод мекунем, мо онро дар функсия мепечандем, номи онро main мегузорем ва сатри аввал ба он функсияи оғози коргарро илова мекунем. Албатта фаромӯш намекунем main-ро даъват кунем. Коди пурра пас аз ҳама сатрҳо бо воридотҳо ҳоло чунин хоҳад буд :

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

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

main()

Ҳоло мо боварем, ки барномаи мо пеш аз он оғоз ба кор нахоҳад кард (ва дархостҳо фиристод ;) ), ки коргар оғоз шавад.

Биёед барномаи худро оғоз кунем ва дар браузер консоли барои таҳиягарон кушоем. Агар шумо дар он матни '[MSW] Mocking enabled.'-ро мебинед, пас шумо хуб кор кардед ва ҳама чизро дуруст насб кардед!!!

Барномаи худро бо донишҷӯён кушоед. Бо маводи ин дарс ошноӣ пайдо карда, Mock Service Worker-ро барои барномаи худ насб кунед.

Файли server.js эҷод кунед, ва дар он коргар эҷод кунед. Worker-ро ба барнома дар main.js васл кунед, тавре ки дар дарс нишон дода шуд. Боварӣ ҳосил кунед, ки ҳама чиз кор мекунад.