Kutuma Data kutoka kwa Seva kupitia Ombi la GET kwenye Redux

Kwa hivyo tuna hifadhidata yenye data. Jambo la kwanza tutakalofanya wakati wa kuzindua programu yetu ya Redux ni kupata data za bidhaa kutoka kwa seva. Ili kufanya hivyo, tunahitaji kutuma ombi la GET kutoka kwenye programu yetu. Wacha tulikabiliane nalo upande wa seva.

Wacha tufungue programu yetu ya bidhaa, na ndani yake faili server.js. Ili kufanya kazi na maombi ya HTTP, tunahitaji kuingiza kwenye faili vifaa kadhaa kutoka kwa msw, wacha tufanye hivyo:

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

Pia hebu tufanye marekebisho ya ukweli mara moja, yaani ucheleweshaji unaowezekana kwenye mtandao. Hebu thamani ya ucheleweshaji wetu wa bande iwe 2 sekunde, ili tuweze kuona jinsi data inapopakuliwa. Hebu tuandike baada ya const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Sasa mwishoni mwa faili kabla ya kuhamisha mfanyakazi hebu tuweke safu ya API vichakataji vya maombi:

export const handlers = []

Kisha kwenye mabano mraba tuandike kichakataji cha kwanza cha kukamata ombi la GET la bidhaa:

export const handlers = [http.get()]

Kigezo cha kwanza kwa http.get tutapitisha anwani bande, kwa mfano '/fakeServer/products', na cha pili kitendo cha wakati usioainishwa kinachofuatana:

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

Sasa tuandike msimbo wa kitendo hiki kinachofuatana. Kwa kusaidia kwake tutachota bidhaa zote kutoka kwa Hifadhidata. Hapa pia tutatumia kitendo serializeProduct, msimbo ambao tuliandika kwenye somo lilopita. Wacha tupitishe kwenye map. Kisha tufanye ucheleweshaji (kana kwamba mtandao unakwama) na turudishe kwenye response vitu vyenye data ya bidhaa kwa mfumo wa JSON:

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

Na ya mwisho. Tumeandika kichakataji cha kwanza kwa mfanyakazi wetu, wacha tupitishe kwa mfanyakazi huyu safu handlers. Ili kufanya hivyo, hebu tusahihishie mstari wa mwisho wa msimbo kwenye faili kuwa:

export const worker = setupWorker(...handlers)

Fungua programu yako ya wanafunzi, na ndani yake faili server.js. Ingiza kwenye faili vifaa vilivyoainishwa kutoka kwa msw. Baada ya kusoma nyenzo za somo hili, unda safu tupu ya vichakataji kwa vikamato vya maombi. Andika ndani yake msimbo wa kichakataji cha ombi la GET la wanafunzi. Kama njia hebu uwe na '/fakeServer/students'.

Mwishoni mwa faili usisahau kupitisha safu ya vichakataji handlers kwa mfanyakazi.