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

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

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