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

На мінулым заняцці мы ўстанавілі msw, які нам дапаможа сымiтаваць работу нашага прыкладання з серверам. І для пачатку мы б хацелі падгружаць пры запусце прыкладання ўжо якія ёсць на серверы даныя.

Давайте адчынём наша прыкладанне з прадуктамі, а ў ім файл 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'

На наступным уроке мы дапоўнім нашы мадэлі неабходнымі палямі.

Задание 1

Адчынiце ваша прыкладанне са студэнтамі. Азнаёміўшыся з матэрыялам гэтага ўрока, усталюйце @mswjs/data для вашага прыкладання.

Задание 2

Далей стварыце мадэль базы даных db пры дапамозе функцыі factory. Перадайце ёй тры аб'екты (student, teacher, vote) для вашых даных, падобна таму як паказана ў уроку.