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:

import { 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:

const ARTIFICIAL_DELAY_MS = 2000

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

export const handlers = []

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

export const handlers = [http.get()]

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

export 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:

export 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:

export const worker = setupWorker(...handlers)

Avage oma õpilastega rakendus, ja selles fail server.js. Importige faili näidatud tööriistad msw-st. Uurides selle tunni materjali, looge tühi massiiv päringute töötlejate jaoks. Kirjutage selles kood GET-päringu õpilaste töötlejale. Teena olgu teil '/fakeServer/students'.

Faili lõpus ärge unustage edastada töötlejate massiivi handlers workerile.