База података за сервер у 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) за ваше податке, слично као што је приказано на часу.