Տվյալների ուղարկում սերվերից 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', իսկ երկրորդը ասինխրոն callback:

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

Այժմ գրենք կոդ այս callback-ի համար: Օգտագործելով այն, մենք կարդալու ենք բոլոր ապրանքները տվյալների բազայից: Այստեղ մենք նաև կօգտագործենք 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 մշակիչների զանգվածը աշխատողին: