Отправка данных с сервера по 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)