База података за сервер у 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'

На следећем часу допунићемо наше моделе потребним пољима.