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:

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

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

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

api/server.jsexport const handlers = []

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

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

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

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

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:

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