Andmete saatmine serverist GET-päringuga Reduxis

Meil on andmebaas andmetega. Esimene asi, mida me teeme oma Redux rakenduse käivitamisel - on toodetega andmete saamine serverist. Selleks peame oma rakendusest saatma GET-päringu. Vaatame selle töötlemist serveri poolel.

Avame oma toodetega rakenduse, ja selles faili server.js. HTTP-päringutega töötamiseks peame importima faili mitmeid tööriistu msw-st, teeme selle:

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

Samuti teeme kohe parandused reaalsusele, st võimalikud viivitused võrgus. Olgu meie tehisliku viivituse väärtus 2 sekundit, et näeksime kuidas andmed laaduvad. Kirjutame selle peale const PRODS_PER_SELLER = 2:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

Ja nüüd faili lõpus enne workeri eksporti loome massiivi API päringute töötlejate jaoks:

api/server.jsexport const handlers = []

Ja siis nurksulgudes kirjutame esimese töötleja GET-päringu produktide jaoks:

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

Esimeseks parameetriks http.get edastame mõne feik-aadressi, näiteks '/fakeServer/products', ja teiseks asünkroonse callbacki:

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

Nüüd kirjutame selle callbacki koodi. Selle abil eraldame kõik tooted andmebaasist. Siin kasutame ka funktsiooni serializeProduct, mille kood me kirjutasime eelmisel tunnil. Edastame selle map-i. Seejärel teeme viivituse (justkui võrk aeglustub) ja tagastame response-is objektid tooteandmetega JSON-vormingus:

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

Ja viimane. Kirjutasime esimese handleri oma workerile, edastame sellele workerile massiivi handlers. Selleks parandame viimase rea koodis failis järgmiselt:

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