Установка msw для работы с серверной частью в Redux
На прошлых занятиях мы сделали несколько дополнительных изменений в нашем приложении. Теперь нам необходимо разобраться с сервером, с которым наше приложение будет обмениваться данными.
Настоящего сервера у нас не будет, поэтому мы просто сымитируем работу с ним, используя крутой инструмент Mock Service Worker. Mock Service Worker (MSW) - это инструмент для имитации API, который использует стандартизированный API Service Worker, предназначенный для перехвата запросов на сетевом уровне. MSW будет генерировать фиктивные ответы (англ. responses) на наши запросы (англ. requests). Причем, как утверждают разработчики, инструмент настолько эффективен и гибок, что после отладки с моками (для которых в приложении ничего специального создавать не требуется), приложение можно пустить в работу с уже настоящим внешним сервером. Документация по нему довольно обширная, и если вы заинтересуетесь в msw, можете почитать ее на официальном сайте.
Давайте перейдем к установке msw. Для этого откроем наш проект с продуктами и в терминале введем:
npm install msw --save-dev
Для работы msw нам также нужно создать и скопировать
mockServiceWorker.js в какую-то публичную
директорию. Часто это папка public. У нас
есть пустая папка public, давайте скопируем
его туда. Для этого запустите в терминале
команду и затем согласитесь на использование
public:
npx msw init public
Теперь заглянем в public, там должен появится
сгенерированный скрипт mockServiceWorker.js. Теперь
запустим наше приложение с продуктами и в адресной строке
браузера введем http://localhost:5173/mockServiceWorker.js
(поскольку наше приложение работает на 5173 порту).
Видите в окне браузера отобразилось содержимое
файла mockServiceWorker.js? Значит все замечательно,
идем дальше.
Далее давайте в папке src создадим папку
api, а в ней файл server.js, в котором
будем писать код сервера. Теперь откроем server.js
и импортируем в него функцию setupWorker
из установленной msw библиотеки:
import { setupWorker } from 'msw/browser'
Ниже в файле создадим переменную worker
и экспортируем его:
export const worker = setupWorker()
А сейчас давайте откроем файл main.jsx
и импортируем в него нашего воркера:
import { worker } from './api/server'
Теперь подцепим его к нашему приложению. Для
этого код, с помощью которого мы создаем корень
нашего React приложения, мы обернем в функцию, назовем
ее main и первой строчкой добавим в нее функцию
запуска для воркера. Конечно же не забудем
вызвать и сам main. Полный код после всех
строчек с импортом будем теперь выглядеть
так:
async function main() {
await worker.start({ onUnhandledRequest: 'bypass' })
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
)
}
main()
Теперь мы уверены, что наше приложение не начнет работать прежде (и отправлять запросы ;) ), чем запустится воркер.
Давайте запустим наше приложение и откроем в
браузере консоль для разработчиков. Если
вы видите в ней текст '[MSW] Mocking enabled.',
то вы молодцы и все установили правильно!!!
Откройте ваше приложение со студентами. Ознакомившись с материалом этого урока, установите Mock Service Worker для вашего приложения.
Создайте файл server.js, а в нем создайте
воркер. Прицепите worker к приложению в
main.js, как показано в уроке. Убедитесь,
что все работает.