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