Databáza pre server v Reduxe

Na minulej hodine sme nainštalovali msw, ktorý nám pomôže simulovať prácu našej aplikácie so serverom. A na začiatok by sme chceli pri spustení aplikácie načítať už existujúce dáta na serveri.

Otvorme našu aplikáciu s produktami, a v nej súbor server.js. Tu už máme pár riadkov kódu z minulej hodiny.

A prvá vec, ktorú sa musíme spýtať: kde zvyčajne sú uložené dáta? Áno, samozrejme v databáze, odpovieme bez rozmýšľania. Preto použime ďalší skvelý nástroj, ktorý nám umožní vytvoriť model našich dát, a tiež spraviť to tak, akoby sme pracovali s reálnou SQL databázou.

Nástroj, ktorý nám s tým pomôže - je knižnica @mswjs/data. Aby sme ju nainštalovali, zadajte do terminálu nasledujúci príkaz:

npm install @mswjs/data --save-dev

Teraz importujme v súbore server.js potrebné veci:

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

A vytvorme našu improvizovanú databázu. Na to použijeme funkciu factory. Urobíme to nižšie po riadkoch s importom a pred exportom workera:

export const db = factory({})

A aké dáta v nej budeme ukladať? Zo servera by sme mali dostávať produkty, predajcov a reakcie používateľov. To znamená, že v našej databáze musíme vytvoriť tri modely, ktoré factory prijíma vo forme objektov:

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

Rovnako ako v reálnej SQL databáze, každý náš model musí mať primary key. Tradične, určíme ako takéto pole id, generovať ktorý budeme tou istou nanoid knižnicou:

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

Nezabudnime pridať nanoid do riadkov importu na začiatku súboru:

import { nanoid } from '@reduxjs/toolkit'

V nasledujúcej lekcii doplníme naše modely o potrebné polia.

Otvorte vašu aplikáciu so študentmi. Po oboznámení sa s materiálom tejto lekcie, nainštalujte @mswjs/data pre vašu aplikáciu.

Ďalej vytvorte model databázy db pomocou funkcie factory. Odovzdajte jej tri objekty (student, teacher, vote) pre vaše dáta, podobne ako je to ukázané v lekcii.