База данни за сървъра в Redux

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

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

И първото, което трябва да се запитаме: къде обикновено се съхраняват данните? Да, разбира се в база данни, ще отговорим без да се замисляме. Затова нека използваме още един страхотен инструмент, който ще ни позволи да създадем модел на нашите данни, както и да направим така, сякаш работим с истинска SQL база.

Инструментът, който ще ни помогне в това - е библиотеката @mswjs/data. За да я инсталирате, въведете в терминала следната команда:

npm install @mswjs/data --save-dev

Сега импортирайте във файла server.js необходимите неща:

import { factory, oneOf, manyOf, primaryKey } from '@mswjs/data'

И ще създадем нашата импровизирана база данни. За целта ще използваме функцията factory. Ще го направим по-долу след редовете с импорт и пред експорта на worker-а:

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