База данных для сервера в Redux

На прошлом занятии мы установили msw, который нам поможет сымитировать работу нашего приложения с сервером. И для начала мы бы хотели подгружать при запуске приложения уже имеющиеся на сервере данные.

Давайте откроем наше приложение с продуктами, а в нем файл server.js. Здесь у нас уже имеется пара строчек кода с прошлого занятия.

И первое, что мы должны спросить у себя: где обычно хранятся данные? Да, конечно в базе данных, ответим мы не задумываясь. Поэтому давайте используем еще один крутой инструмент, который позволит нам создать модель наших данных, а также сделать так, как будто мы работаем с настоящей SQL-базой.

Инструмент, который нам в этом поможет - это библиотека @mswjs/data. Чтобы ее установить, вбейте в терминале следующую команду:

terminalnpm install @mswjs/data --save-dev

Теперь импортируем в файле server.js нужные нам вещи:

api/server.jsimport { factory, oneOf, manyOf, primaryKey } from '@mswjs/data'

И создадим нашу импровизировнную базу данных. Для этого мы используем функцию factory. Сделаем мы это ниже после строчек с импортом и перед экспортом воркера:

api/server.jsexport const db = factory({})

А какие данные мы будем в ней хранить? С сервера мы должны получать продукты, продавцов и реакции пользователей. Значит в нашей базе данных мы должны создать три модельки, которые принимает factory в виде объектов:

api/server.jsexport const db = factory({
  product: {},
  seller: {},
  reaction: {},
})

Как и в настоящей SQL базе данных каждая наша моделька должна иметь primary key. Традиционно, мы назначим таким полем id, генерировать который мы будем все той же nanoid библиотекой:

api/server.jsexport const db = factory({
  product: {
    id: primaryKey(nanoid),
  },
  seller: {
    id: primaryKey(nanoid),
  },
  reaction: {
    id: primaryKey(nanoid),
  },
})

Не забудем добавить nanoid в строчках импорта в начале файла:

api/server.jsimport { nanoid } from '@reduxjs/toolkit'

На следующем уроке мы дополним наши модели необходимыми полями.