Stuur data vanaf die bediener via 'n GET-versoek in Redux

Ons het dus 'n databasis met data. Die eerste ding wat ons sal doen wanneer ons Redux-toepassing begin, is om produkdata van die bediener af te haal. Om dit te doen, moet ons 'n GET-versoek vanaf ons toepassing stuur. Kom ons hanteer dit aan die bedienerkant.

Maak ons produktoepassing oop, en daarin die lêer server.js. Om met HTTP-versoeke te werk, moet ons 'n paar instrumente van msw in die lêer inbring, kom ons doen dit:

import { http, HttpResponse, delay } from 'msw'

Laat ons ook dadelik aanpassings maak vir die realiteit, dit wil sê moontlike vertragings in die netwerk. Laat die waarde van ons kunsmatige vertraging 2 sekondes wees, sodat ons kan sien hoe die data laai. Kom ons skryf dit na const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

En nou, aan die einde van die lêer voor die uitvoer van die werker, laat ons 'n skikking vir API- versoekhanteerders maak:

export const handlers = []

En skryf dan tussen vierkantige hakies die eerste hanteerder om 'n GET-versoek vir produkte te onderskep:

export const handlers = [http.get()]

As eerste parameter vir http.get sal ons 'n fopadres oordra, byvoorbeeld '/fakeServer/products', en as tweede 'n asinchrone terugroepfunksie:

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

Kom ons skryf nou die kode vir hierdie terugroepfunksie. Hiermee sal ons alle produkte uit die databasis onttrek. Hier sal ons ook die funksie serializeProduct gebruik, waarvan ons die kode in die vorige les geskryf het. Kom ons dra dit in map oor. Maak dan 'n vertraging (asof die netwerk stadig is) en gee in response die voorwerpe met produkdata as JSON terug:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

En laastens. Ons het die eerste hanteerder vir ons werker geskryf, laat ons nou die skikking handlers aan hierdie werker oordra. Om dit te doen, laat ons die laaste reël kode in die lêer verander na:

export const worker = setupWorker(...handlers)

Maak jou studentetoepassing oop, en daarin die lêer server.js. Bring die aangeduide instrumente van msw in die lêer in. Na bestudering van die materiaal van hierdie les, skep 'n leë skikking van hanteerders vir onderskepping van versoeke. Skryf daarin die kode vir die hanteerder van 'n GET-versoek vir studente. Laat die pad vir jou wees '/fakeServer/students'.

Moenie aan die einde van die lêer vergeet om die skikking van hanteerders handlers aan die werker oor te dra nie.