База данных для сервера в Redux
На прошлом занятии мы установили msw, который нам поможет сымитировать работу нашего приложения с сервером. И для начала мы бы хотели подгружать при запуске приложения уже имеющиеся на сервере данные.
Давайте откроем наше приложение с продуктами,
а в нем файл server.js. Здесь у нас уже
имеется пара строчек кода с прошлого
занятия.
И первое, что мы должны спросить у себя: где обычно хранятся данные? Да, конечно в базе данных, ответим мы не задумываясь. Поэтому давайте используем еще один крутой инструмент, который позволит нам создать модель наших данных, а также сделать так, как будто мы работаем с настоящей SQL-базой.
Инструмент, который нам в этом поможет - это библиотека @mswjs/data. Чтобы ее установить, вбейте в терминале следующую команду:
npm install @mswjs/data --save-dev
Теперь импортируем в файле server.js
нужные нам вещи:
import { factory, oneOf, manyOf, primaryKey } from '@mswjs/data'
И создадим нашу импровизировнную базу
данных. Для этого мы используем функцию
factory. Сделаем мы это ниже после
строчек с импортом и перед экспортом воркера:
export const db = factory({})
А какие данные мы будем в ней хранить?
С сервера мы должны получать продукты,
продавцов и реакции пользователей. Значит
в нашей базе данных мы должны создать
три модельки, которые принимает factory
в виде объектов:
export const db = factory({
product: {},
seller: {},
reaction: {},
})
Как и в настоящей SQL базе данных каждая
наша моделька должна иметь primary key.
Традиционно, мы назначим таким полем id,
генерировать который мы будем все той же
nanoid библиотекой:
export const db = factory({
product: {
id: primaryKey(nanoid),
},
seller: {
id: primaryKey(nanoid),
},
reaction: {
id: primaryKey(nanoid),
},
})
Не забудем добавить nanoid в строчках импорта в начале файла:
import { nanoid } from '@reduxjs/toolkit'
На следующем уроке мы дополним наши модели необходимыми полями.
Откройте ваше приложение со студентами. Ознакомившись с материалом этого урока, установите @mswjs/data для вашего приложения.
Далее создайте модель базы данных db при
помощи функции factory. Передайте ей три
объекта (student, teacher, vote) для
ваших данных, подобно тому как показано
в уроке.