Datu bāze serverim Redux

Pēdējā nodarbībā mēs instalējām msw, kas mums palīdzēs imitēt mūsu lietotnes darbību ar serveri. Un sākumā mēs vēlētos ielādēt jau serverī esošos datus, kad lietotne tiek palaista.

Atveram mūsu produktu lietotni, un tajā failu server.js. Šeit mums jau ir pāris koda rindiņas no pēdējās nodarbības.

Un pirmais, ko mums vajadzētu sev jautāt: kur parasti tiek glabāti dati? Jā, protams, datu bāzē, atbildēsim mēs neapdomājoties. Tāpēc izmantosim vēl vienu lielisku rīku, kas ļaus mums izveidot mūsu datu modeli, kā arī izveidot iespaidu, it kā mēs strādātu ar īstu SQL datu bāzi.

Rīks, kas mums to palīdzēs - ir bibliotēka @mswjs/data. Lai to instalētu, terminālī ierakstiet šādu komandu:

npm install @mswjs/data --save-dev

Tagad importējam failā server.js vajadzīgās lietas:

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

Un izveidosim mūsu improvizēto datu bāzi. Lai to izdarītu, mēs izmantosim funkciju factory. Mēs to darīsim zemāk aiz importēšanas rindiņām un pirms darbinieka eksporta:

export const db = factory({})

Un kādus datus mēs tajā glabāsim? No servera mums vajadzētu saņemt produktus, pārdevējus un lietotāju reakcijas. Tātad mūsu datu bāzē mums jāizveido trīs modeļi, ko factory pieņem objektu veidā:

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

Tāpat kā īstā SQL datu bāzē, katram mūsu modelim jābūt primary key. Tradicionāli mēs par šādu lauku noteiksim id, kuru ģenerēsim ar to pašu nanoid bibliotēku:

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

Neaizmirsīsim pievienot nanoid importēšanas rindiņās faila sākumā:

import { nanoid } from '@reduxjs/toolkit'

Nākamajā nodarbībā mēs papildināsim mūsu modeļus ar nepieciešamajiem laukiem.

Atveriet savu studentu lietotni. Iepazīstoties ar šīs nodarbības materiālu, instalējiet @mswjs/data savai lietotnei.

Tālāk izveidojiet datu bāzes modeli db ar funkcijas factory palīdzību. Padodiet tai trīs objektus (student, teacher, vote) jūsu datiem, līdzīgi kā parādīts nodarbībā.