Datu sūtīšana no servera pēc GET pieprasījuma Redux

Tātad mums ir datu bāze. Pirmā lieta, ko mēs darīsim, palaižot mūsu Redux lietotni, ir iegūt produktu datus no servera. Lai to izdarītu, mums no mūsu lietotnes ir jāsūta GET pieprasījums. Apstrādāsim to servera pusē.

Atvērsim mūsu produktu lietotni, un tajā failu server.js. Lai strādātu ar HTTP pieprasījumiem, mums jāimportē failā vairāki instrumenti no msw, darīsim to:

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

Arī uzreiz veiksim labojumus realitātei, tas ir, iespējamos tīkla aizkaves. Lai mūsu mākslīgās aizkaves vērtība būtu 2 sekundes, lai mēs redzētu, kā ielādējas dati. Uzrakstīsim to pēc const PRODS_PER_SELLER = 2:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

Un tagad faila beigās pirms eksportēšanas izveidosim masīvu API pieprasījumu apstrādātājiem:

api/server.jsexport const handlers = []

Un tad kvadrātiekavās uzrakstīsim pirmo apstrādātāju GET pieprasījuma pārtveršanai produktiem:

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

Pirmo parametru http.get mēs padodam kādu viltus adresi, piemēram '/fakeServer/products', un otro asinhrono callback:

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

Tagad uzrakstīsim kodu šim callback. Ar tā palīdzību mēs iegūsim visus produktus no datu bāzes. Šeit mēs arī izmantosim funkciju serializeProduct, kuras kodu mēs uzrakstījām iepriekšējā nodarbībā. Padodam to map. Pēc tam veiksim aizkavi (it kā tīkls lēnām strādā) un atgriezīsim response objektus ar produktu datiem JSON formātā:

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

Un pēdējais. Mēs uzrakstījām pirmo handler mūsu workerim, padodam šim workerim masīvu handlers. Lai to izdarītu, labojam pēdējo koda rindu failā uz:

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