Baza podataka za server u Redux-u

Na prošlom času smo instalirali msw, koji će nam pomoći da oponašamo rad naše aplikacije sa serverom. I za početak želeli bismo da pri pokretanju aplikacije učitamo postojeće podatke sa servera.

Hajde da otvorimo našu aplikaciju sa proizvodima, a u njoj fajl server.js. Ovde već imamo par linija koda sa prošlog časa.

I prvo što bismo trebali da se zapitamo: gde se obično čuvaju podaci? Da, naravno u bazi podataka, odgovorićemo bez razmišljanja. Stoga hajde da iskoristimo još jedan sjajan alat, koji će nam omogućiti da napravimo model naših podataka, kao i da učinimo kao da radimo sa pravom SQL bazom.

Alat koji će nam u tome pomoći - je biblioteka @mswjs/data. Da bismo je instalirali, ukucajte u terminalu sledeću komandu:

npm install @mswjs/data --save-dev

Sada uvezimo u fajl server.js potrebne stvari:

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

I napravićemo našu improvizovanu bazu podataka. Za to ćemo koristiti funkciju factory. Uradićemo to ispod posle linija sa uvozom i pre izvoza workera:

export const db = factory({})

A koje podatke ćemo u njoj čuvati? Sa servera bismo trebali dobijati proizvode, prodavce i reakcije korisnika. Znači u našoj bazi podataka treba da napravimo tri modela, koje factory prihvata u obliku objekata:

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

Kao i u pravoj SQL bazi podataka svaki naš model mora imati primary key. Tradicionalno, odredićemo takvo polje kao id, koji ćemo generisati istom onom nanoid bibliotekom:

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

Ne zaboravimo da dodamo nanoid u linijama uvoza na početku fajla:

import { nanoid } from '@reduxjs/toolkit'

Na sledećoj lekciji ćemo dopuniti naše modele potrebnim poljima.

Otvorite vašu aplikaciju sa studentima. Nakon upoznavanja sa materijalom ove lekcije, instalirajte @mswjs/data za vašu aplikaciju.

Zatim napravite model baze podataka db uz pomoć funkcije factory. Prosledite joj tri objekta (student, teacher, vote) za vaše podatke, slično kao što je pokazano na lekciji.