Redux-da GET-soragy arkaly serwerden maglumat ibermek

Şeýlelikde, bizde maglumatlar bazasy bar. Bizim Redux programmamyzy işletjek bolanymyzda ilkinji etjek işimiz serwerden önümler barada maglumat almak bolmaly. Bunuň üçin programmamyzdan GET-soragy ibermeli. Geliň ony serwer tarapynda işleýäli.

Önümler bilen işleýän programmany açalyň, onyň içindäki server.js faýlyny açyň. HTTP-soraglary bilen işlemek üçin, biz msw-den birnäçe gurallary faýla import etmeli, geliň muny edeliň:

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

Şeýle hem, hakyky durmuşa, ýagny tor düwünişlerine düzeltme edeliň. Sunky düwüniş bahamyzy 2 sekunt bolsun, şonuň üçin maglumatlaryň ýüklenýändigini göreris. Ony const PRODS_PER_SELLER = 2-den soň ýazalyň:

const ARTIFICIAL_DELAY_MS = 2000

Indi bolsa faýlyň ahyrynda, işçini export etmezden ozal, API sorag işleýjileri üçin massiw döredeliň:

export const handlers = []

Soňra kwadrat ähmiýetli belgiler içinde önümler üçin GET-soragyny gabat almak üçin ilkinji işleýjini ýazalyň:

export const handlers = [http.get()]

http.get üçin ilkinji parametr hökmünde ýalan adresi, mysal üçin '/fakeServer/products' bereris, ikinjisi bolsa asenkhron kallback:

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

Indi şu kallback üçin kody ýazalyň. Onuň ýardamy bilen biz ähli önümleri Maglumatlar bazasyndan alyp bolaris. Bu ýerde biz geçen sapakda ýazan serializeProduct funksiýasyny hem ulanarys. Geliň ony map-e geçireliň. Soňra düwüniş edeliň (gowşak tory ýaly) we response-a önüm maglumatlarynyň obýektlerini JSON görnüşinde gaýtarys:

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

Soňky zady. Işçimiz üçin ilkinji handler-i ýazdyk, geliň bu işçä handlers massiwini geçireliň. Bunuň üçin faýldaky iň soňky setiri şuňa üýtgetmeli:

export const worker = setupWorker(...handlers)

Studentlar bilen işleýän programmanyňyzy açyň, onyň içindäki server.js faýlyny açyň. Msw-den görkezilen gurallary import ediň. Bu sapagyň materialyny öwrenip, soraglary gabat almak üçin boş işleýjiler massiwini dörediň. Onyň içinde studentlar üçin GET-soragy işleýjisiniň koduny ýazyň. Ýol hökmünde '/fakeServer/students' bolsun.

Faýlyň ahyrynda handlers massiwini işçä geçirmegi ýatdan çykarmaň.