Dërgimi i të dhënave nga serveri përmes kërkesës GET në Redux

Pra, ne kemi një bazë të dhënash. Gjëja e parë që ne do të bëjmë kur nisim aplikacionin tonë Redux është të marrim të dhënat e produkteve nga serveri. Për këtë, ne duhet të dërgojmë një kërkesë GET nga aplikacioni ynë. Le ta trajtojmë atë në anën e serverit.

Le të hapim aplikacionin tonë me produktet, dhe në të skedarin server.js. Në mënyrë që të punojmë me kërkesat HTTP, ne duhet të importojmë në skedar disa mjete nga msw, le ta bëjmë këtë:

api/server.jsimport { http, HttpResponse, delay } from 'msw'

Gjithashtu, le të bëjmë menjëherë rregullimet për realitetin, domethënë vonesat e mundshme në rrjet. Le të jetë vlera e vonesës sonë artificiale 2 sekonda, në mënyrë që të mund të shohim se si ngarkohen të dhënat. Le ta shkruajmë atë pas const PRODS_PER_SELLER = 2:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

Dhe tani, në fund të skedarit, para eksportit të worker, le të krijojmë një grup për trajtuesit e kërkesave të API:

api/server.jsexport const handlers = []

Dhe pastaj, brenda kllapave katrore, le të shkruajmë trajtuesin e parë për ndërprerjen e kërkesës GET për produktet:

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

Si parametër të parë për http.get, ne do të kalojmë ndonjë adresë të rreme, për shembull '/fakeServer/products', dhe si të dytë, një callback asinkron:

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

Tani, le të shkruajmë kodin për këtë callback. Me ndihmën e tij, ne do të nxjerrim të gjitha produktet nga DB. Këtu do të përdorim gjithashtu funksionin serializeProduct, kodin e të cilit e kemi shkruar në seancën e kaluar. Le ta kalojmë atë në map. Pastaj, le të bëjmë një vonesë (sikur rrjeti është i ngadaltë) dhe të kthejmë në response objektet me të dhënat e produkteve në formën 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)
  }),
]

Dhe e fundit. Ne kemi shkruar trajtuesin e parë për worker-in tonë, le t'ia kalojmë këtij worker grupin handlers. Për këtë, le të korrigjojmë rreshtin e fundit të kodit në skedar në:

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