Podatkovna baza za strežnik v Redux

V prejšnji lekciji smo namestili msw, ki nam bo pomagal simulirati delo naše aplikacije s strežnikom. In za začetek bi želeli, da se ob zagonu aplikacije naložijo že obstoječi podatki na strežniku.

Odprimo našo aplikacijo s produkti, in v njej datoteko server.js. Tukaj že imamo nekaj vrstic kode iz prejšnje lekcije.

In prvo vprašanje, ki si ga moramo zastaviti: kje se običajno shranjujejo podatki? Da, seveda v podatkovni bazi, bomo odgovorili brez razmišljanja. Zato uporabimo še eno odlično orodje, ki nam bo omogočilo ustvariti model naših podatkov, in tudi narediti tako, kot da delamo s pravo SQL bazo.

Orodje, ki nam bo pri tem pomagalo - je knjižnica @mswjs/data. Da jo namestimo, vtipkajmo v terminal naslednji ukaz:

npm install @mswjs/data --save-dev

Zdaj uvozimo v datoteko server.js potrebne stvari:

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

In ustvarimo našo improvizirano podatkovno bazo. Za to bomo uporabili funkcijo factory. Naredili bomo to spodaj za vrsticami z uvozom in pred izvozom workerja:

export const db = factory({})

In katere podatke bomo shranjevali v njej? S strežnika moramo prejemati produkte, prodajalce in reakcije uporabnikov. Torej moramo v naši podatkovni bazi ustvariti tri modele, ki jih factory sprejme v obliki objektov:

export const db = factory({
	product: {},
	seller: {},
	reaction: {},
})

Kot v pravi SQL podatkovni bazi mora vsak naš model imeti primary key. Tradicionalno bomo za to polje določili id, ki ga bomo generirali z isto knjižnico nanoid:

export const db = factory({
	product: {
		id: primaryKey(nanoid),
	},
	seller: {
		id: primaryKey(nanoid),
	},
	reaction: {
		id: primaryKey(nanoid),
	},
})

Ne pozabimo dodati nanoid v vrstice uvoza na začetku datoteke:

import { nanoid } from '@reduxjs/toolkit'

V naslednji lekciji bomo naše modele dopolnili z zahtevanimi polji.

Odprite vašo aplikacijo s študenti. Po seznanitvi z gradivom te lekcije, namestite @mswjs/data za vašo aplikacijo.

Nato ustvarite model podatkovne baze db s pomočjo funkcije factory. Podajte ji tri objekte (student, teacher, vote) za vaše podatke, podobno kot je prikazano v lekciji.