Деректерді серверден GET-сұраныс арқылы жіберу Redux-те

Сондықтан бізде деректер базасы бар. Біздің Redux қолдануымызды іске қосқан кезде бірінші істейтін ісіміз - бұл серверден өнімдер туралы деректерді алу. Ол үшін бізге қолдануымыздан GET-сұраныс жіберу керек. Оны сервер жағында өңдейік.

Өнімдеріміз бар қолдануымызды ашып, ондағы server.js файлын ашайық. HTTP-сұраныстармен жұмыс істеу үшін бізге бірнеше құралды msw-ден файлға импорттау керек, мұны істейік:

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

Сондай-ақ дерексіздікке, яғни желідегі ықтимал кешігулерге бірден түзетулер енгізейік. Біздің жасанды кешіктіру мәні 2 секунд болсын, сонда біз деректердің қалай жүктелетінін көреміз. Оны const PRODS_PER_SELLER = 2-ден кейін жазайық:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

Ал енді файлдың соңында воркерді экспорттау алдында API сұраныс өңдегіштері үшін массив құрайық:

api/server.jsexport const handlers = []

Содан кейін шаршы жақшаларда өнімдердің GET-сұранысын ұстау үшін бірінші өңдегішті жазайық:

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

http.get үшін бірінші параметр ретінде біз қандай да бір жалған мекен-жай береміз, мысалы '/fakeServer/products', ал екіншісінде асинхронды callback:

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

Енді осы callback үшін код жазайық. Оның көмегімен біз барлық өнімдерді ДБ-ден аламыз. Мұнда біз сонымен қатар функцияны қолданамыз serializeProduct, оның кодын біз өткен сабақта жазған болатынбыз. Оны map-ке берейік. Содан кейін кешіктіру жасаймыз (сезіледі желі баяу жұмыс істейді) және response-та өнім деректерінің нысандарын 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)
  }),
]

Және соңғысы. Біз өз воркеріміз үшін бірінші handler-ды жаздық, осы воркерге handlers массивін берейік. Ол үшін файлдағы соңғы жолды төмендегідей түзетейік:

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