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

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

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

api/server.jsimport { http, HttpResponse, delay } from 'msw'

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

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

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

api/server.jsexport const handlers = []

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

api/server.jsexport const handlers = [http.get()]

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

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

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

api/server.jsexport 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 අරාව යවමු. මේ සඳහා ගොනුවේ අවසාන පේළිය වෙනස් කරමු:

api/server.jsexport const worker = setupWorker(...handlers)