GET-ඉල්ලීමක් භාවිතයෙන් සර්වරයෙන් දත්ත යැවීම Redux හි

ඉතින් අපට දත්ත සහිත දත්ත සමුදායක් තිබේ. අපගේ Redux යෙදුම ආරම්භ කරන විට කරන්නේ පළමු දෙය සර්වරයෙන් නිෂ්පාදන සමඟ දත්ත ලබා ගැනීමයි. මේ සඳහා අපගේ යෙදුමෙන් GET ඉල්ලීමක් යැවිය යුතුය. අපි එය සර්වර පැත්තෙන් හසු කර ගනිමු.

අපගේ නිෂ්පාදන සහිත යෙදුම විවෘත කරමු, එහි ඇති server.js ගොනුවද විවෘත කරමු. HTTP ඉල්ලීම් සමඟ වැඩ කිරීම සඳහා, අපට msw වෙතින් මෙවලම් කිහිපයක් ගොනුවට ආයාත කිරීමට අවශ්‍යයි. අපි එය කරමු:

import { http, HttpResponse, delay } from 'msw'

එසේම, අපට තිබෙන සැබෑ ජාල ප්‍රමාදයන් සඳහා වෙනස්කම් කරමු. අපගේ කෘතිම ප්‍රමාදය 2 තත්පර විය යුතුය, එවිට දත්ත පැටවෙන ආකාරය අපට දැක ගත හැකිය. එය const PRODS_PER_SELLER = 2 ට පසුව ලියමු:

const ARTIFICIAL_DELAY_MS = 2000

දැන්, ගොනුව අවසානයේ වර්කරය නිර්යාත කිරීමට පෙර API ඉල්ලීම් හැසිරවීම සඳහා අරාවක් තනිමු:

export const handlers = []

පසුව, හතරැස් වරහන් තුළ නිෂ්පාදන සඳහා GET ඉල්ලීම අල්ලා ගැනීම සඳහා පළමු හැසිරවීම් කේතය ලියමු:

export const handlers = [http.get()]

http.get සඳහා පළමු පරාමිතිය ලෙස අපි අනුකරණ ලිපිනයක්, උදාහරණයක් ලෙස '/fakeServer/products', සහ දෙවන පරාමිතිය ලෙස අසමකාලී කොල්බැක් එක යවන්නෙමු:

export const handlers = [http.get('/fakeServer/products', async () => {})]

දැන් මෙම කොල්බැක් සඳහා කේතය ලියමු. එහි ආධාරයෙන් අපි සියලුම නිෂ්පාදන දත්ත සමුදායෙන් ලබා ගනිමු. මෙහිදී අපි පසුගිය පංතියේ ලියූ serializeProduct ශ්‍රිතයද භාවිතා කරමු. අපි එය map ට යවමු. පසුව ප්‍රමාදයක් සිදු කරමු (ජාලය සෙමින් ක්‍රියා කරනවා යැයි සිතමු) සහ response ට JSON ආකාරයෙන් නිෂ්පාදන දත්ත සහිත වස්තූන් ප්‍රතිදානය කරමු:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

අවසානයට. අපි අපගේ වර්කරය සඳහා පළමු handler එක ලියා ඇත. අපි මෙම වර්කරයට handlers අරාව යවමු. මේ සඳහා ගොනුවේ අවසාන පේළිය වෙනස් කරමු:

export const worker = setupWorker(...handlers)

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කරන්න, එහි ඇති server.js ගොනුවද විවෘත කරන්න. msw වෙතින් දක්වා ඇති මෙවලම් ගොනුවට ආයාත කරන්න. මෙම පාඩමේ ද්‍රව්‍ය අධ්‍යයනය කිරීමෙන් පසු, ඉල්ලීම් අල්ලා ගැනීම සඳහා හිස් හැසිරවීම් අරාවක් සාදන්න. එහි ශිෂ්‍යයින් සඳහා GET ඉල්ලීම හැසිරවීම සඳහා කේතය ලියන්න. මාර්ගය ලෙස ඔබට '/fakeServer/students' භාවිතා කළ හැකිය.

ගොනුව අවසානයේදී, අරාව handlers වර්කරයට යැවීමට අමතක නොකරන්න.