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

api/server.jsimport { 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ň:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

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

api/server.jsexport const handlers = []

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

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

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

api/server.jsexport 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:

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

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:

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