Отправка данных с сервера по GET-запросу в Redux
Итак у нас есть база с данными. Первое, что мы будем делать при запуске нашего Redux приложения - это получать с сервера данные с продуктами. Для этого нам нужно из нашего приложения отправить GET-запрос. Давайте обработаем его на стороне сервера.
Откроем наше приложение с продуктами,
а в нем файл server.js. Для того, чтобы
работать с HTTP-запросами, нам нужно
импортировать в файл несколько
инструментов из msw, давайте сделаем это:
import { http, HttpResponse, delay } from 'msw'
Также сразу сделаем поправки на реальность,
то есть возможные задержки в сети. Пусть
значение нашей искусственной задержки будет
составлять 2 секунды, чтобы мы видели как
подгружаются данные. Напишем ее после
const PRODS_PER_SELLER = 2:
const ARTIFICIAL_DELAY_MS = 2000
А теперь в конце файла перед экспортом воркера заведем массив для API обработчиков запросов:
export const handlers = []
И затем в квадратных скобочках напишем первый обработчик для перехвата GET-запроса продуктов:
export const handlers = [http.get()]
Первым параметром для http.get мы передадим
какой-то фейковый адрес, например
'/fakeServer/products', а вторым асинхронный
callback:
export const handlers = [http.get('/fakeServer/products', async () => {})]
Теперь напишем код для этого callback. С
помощью него мы извлечем все продукты из БД.
Здесь мы также используем функцию
serializeProduct, код которой мы написали
на прошлом занятии. Давайте передадим
ее в map. Затем сделаем задержку (как будто
сеть тормозит) и вернем в response объекты
с данными продуктов в виде json:
export 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. Для этого исправим последнюю строчку
кода в файле на:
export const worker = setupWorker(...handlers)
Откройте ваше приложение со студентами,
а в нем файл server.js. Импортируйте
в файл указанные инструменты из msw.
Изучив материал данного урока, создайте
пустой массив обработчиков для
перехватов запросов. Напишите в нем
код для обработчика GET-запроса студентов.
В качестве пути пусть у вас будет
'/fakeServer/students'.
В конце файла не забудьте передать
массив обработчиков handlers воркеру.