Duomenų siuntimas iš serverio naudojant GET užklausą Redux

Taigi, mes turime duomenų bazę. Pirmas dalykas, kurį darysime paleisdami savo Redux programą, yra gauti produktų duomenis iš serverio. Tam mums reikia iš mūsų programos išsiųsti GET užklausą. Pažiūrėkime, kaip ją apdoroti serverio pusėje.

Atidarykime savo produktų programą, o joje failą server.js. Kad galėtume dirbti su HTTP užklausomis, mums reikia importuoti į failą kelis įrankius iš msw, darykime tai:

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

Taip pat iš karto atliksime pataisymus, atsižvelgdami į realybę, tai yra, galimus delsos tinkle. Tegul mūsų dirbtinės delsos reikšmė yra 2 sekundės, kad matytume, kaip įkeliami duomenys. Parašykime ją po const PRODS_PER_SELLER = 2:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

O dabar failo pabaigoje prieš eksportuodami workerį, sukurkime masyvą API užklausų tvarkytuvams:

api/server.jsexport const handlers = []

Ir tada laužtiniuose skliaustuose parašykime pirmąjį tvarkytuvą GET užklausai, skirtai produktams gauti:

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

Pirmuoju http.get parametru perduosime kokių nors netikrą adresą, pavyzdžiui, '/fakeServer/products', o antruoju - asinchroninį callback:

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

Dabar parašykime šio callback kodą. Su jo pagalba mes ištrauksime visus produktus iš DB. Čia mes taip pat panaudosime funkciją serializeProduct, kurios kodą parašėme praėjusioje pamokoje. Perduokime jį į map. Tada sukurkime delsimą (tarsi tinklas lėtai veikia) ir grąžinkime response objektus su produktų duomenimis JSON formatu:

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)
  }),
]

Ir paskutinis dalykas. Mes parašėme pirmąjį handlerį mūsų workeriui, dabar perduokime šiam workeriui masyvą handlers. Tam pakeiskime paskutinę failo kodo eilutę į:

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