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:

terminalnpm install @mswjs/data --save-dev

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

api/server.jsimport { 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:

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsimport { nanoid } from '@reduxjs/toolkit'

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