Redux හි සර්වර් ක්‍රියාකාරිත්වය සඳහා msw ස්ථාපනය කිරීම

පසුගිය පාඩම් වලදී අපි අපගේ යෙදුමේ අමතර වෙනස්කම් කිහිපයක් සිදු කළෙමු. දැන් අපගේ යෙදුම දත්ත හුවමාරු කරගන්නා සර්වරය සමඟ කටයුතු කිරීම අපට අවශ්‍යය.

සැබෑ සර්වරයක් අපට නොමැති නිසා අපි එය සමඟ කටයුතු කිරීම වෙනුවට අනුකරණය කරන්නෙමු, භාවිතා කරමින් අපූරු මෙවලමක් Mock Service Worker. Mock Service Worker (MSW) යනු API අනුකරණය කිරීම සඳහා වන මෙවලමක් වන අතර එය සම්මතීකෘත API Service Worker භාවිතා කරයි, ජාල මට්ටමේ ඉල්ලීම් අතරට ඇතුළු වීමට නිර්මාණය කර ඇත. MSW අපගේ ඉල්ලීම් වලට (requests) අනුකරණ ප්‍රතිචාර (responses) ජනනය කරනු ඇත. එසේ වුවද, සංවර්ධකයින් පවසන පරිදි, මෙම මෙවලම එතරම් effective සහ නම්‍යශීලී බැවින් අනුකරණ සමඟ දෝෂ නිරාකරණය කිරීමෙන් පසු (සඳහා යෙදුමේ විශේෂ දෙයක් සෑදීම අවශ්‍ය නොවේ), යෙදුම දැනටමත් සැබෑ බාහිර සර්වරයක් සමඟ ක්‍රියාත්මක කළ හැකිය. එහි ප්‍රලේඛනය තරමක් විශාල ය, සහ, ඔබ 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, සහ එහි නිර්මාණය කරන්න වැඩ කරන්නා. වැඩ කරන්නා යෙදුමට අනුබද්ධ කරන්න main.js, පාඩමේ පෙන්වා ඇති පරිදි. විශ්වාස කරන්න, සියල්ල ක්‍රියාත්මක වේ.