Adatbázis a szerverhez a Redux-ban

Az előző órán telepítettük az msw-t, ami segít majd szimulálni az alkalmazásunk szerverrel való együttműködését. Kezdetnek azt szeretnénk, hogy az alkalmazás indításakor már a szerveren meglévő adatok is betöltődjenek.

Nyissuk meg a termékekkel kapcsolatos alkalmazásunkat, és benne a server.js fájlt. Itt már van néhány sor kód az előző óráról.

És az első kérdés, amit fel kell tennünk magunknak: hol szokás általában tárolni az adatokat? Igen, természetesen egy adatbázisban, válaszoljuk meg gondolkodás nélkül. Ezért használjunk még egy klassz eszközt, ami lehetővé teszi számunkra, hogy modellezzük az adatainkat, és azt is, mintha valódi SQL-adatbázissal dolgoznánk.

Az eszköz, amely ebben segít - ez a @mswjs/data könyvtár. A telepítéséhez írja be a terminálba a következő parancsot:

npm install @mswjs/data --save-dev

Most importáljuk a server.js fájlba a szükséges dolgokat:

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

És készítsük el az improvizált adatbázisunkat. Ehhez a factory függvényt fogjuk használni. Ezt az import sorok után, de a worker exportálása előtt fogjuk megtenni:

export const db = factory({})

És milyen adatokat fogunk benne tárolni? A szerverről termékeket, eladókat és felhasználói reakciókat kell kapnunk. Tehát az adatbázisunkban három modellt kell létrehoznunk, amelyeket a factory objektumok formájában fogad el:

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

Akárcsak egy valódi SQL adatbázisban, minden modellünknek rendelkeznie kell egy primary key-vel. Hagyományosan az id mezőt jelöljük ki ennek megfelelően, amelyet ugyanaz a nanoid könyvtár fog generálni:

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

Ne felejtsük el hozzáadni a nanoid-t az import sorokhoz a fájl elején:

import { nanoid } from '@reduxjs/toolkit'

A következő leckén kiegészítjük a modelleinket a szükséges mezőkkel.

Nyissa meg a diákokkal kapcsolatos alkalmazását. Miután megismerkedett ennek a leckének az anyagával, telepítse a @mswjs/data-t az alkalmazásához.

Ezután hozza létre az db adatbázis modellt a factory függvény segítségével. Adjon át neki három objektumot (student, teacher, vote) az adataihoz, hasonlóan ahhoz, ahogyan az az órán bemutatásra került.