Baza danych dla serwera w Redux

Na poprzednich zajęciach zainstalowaliśmy msw, który pomoże nam zasymulować pracę naszej aplikacji z serwerem. I na początek chcielibyśmy, aby przy uruchomieniu aplikacji były już wczytywane dane istniejące na serwerze.

Otwórzmy naszą aplikację z produktami, a w niej plik server.js. Tutaj mamy już kilka linijek kodu z poprzednich zajęć.

I pierwsze, o co musimy siebie zapytać: gdzie zwykle przechowywane są dane? Tak, oczywiście w bazie danych, odpowiemy bez zastanowienia. Dlatego użyjmy jeszcze jednego świetnego narzędzia, które pozwoli nam stworzyć model naszych danych, a także sprawi, że będzie to wyglądać jak praca z prawdziwą bazą SQL.

Narzędzie, które nam w tym pomoże - to biblioteka @mswjs/data. Aby ją zainstalować, wpisz w terminalu następujące polecenie:

terminalnpm install @mswjs/data --save-dev

Teraz zaimportujmy w pliku server.js potrzebne nam rzeczy:

api/server.jsimport { factory, oneOf, manyOf, primaryKey } from '@mswjs/data'

I stwórzmy naszą improwizowaną bazę danych. Do tego użyjemy funkcji factory. Zrobimy to poniżej po linijkach z importem i przed eksportem workera:

api/server.jsexport const db = factory({})

A jakie dane będziemy w niej przechowywać? Z serwera powinniśmy otrzymywać produkty, sprzedawców i reakcje użytkowników. Znaczy że w naszej bazie danych powinniśmy stworzyć trzy modele, które przyjmuje factory w formie obiektów:

api/server.jsexport const db = factory({
  product: {},
  seller: {},
  reaction: {},
})

Jak w prawdziwej bazie SQL, każdy nasz model powinien mieć primary key. Tradycyjnie, jako takie pole ustanowimy id, generować które będziemy tą samą biblioteką nanoid:

api/server.jsexport const db = factory({
  product: {
    id: primaryKey(nanoid),
  },
  seller: {
    id: primaryKey(nanoid),
  },
  reaction: {
    id: primaryKey(nanoid),
  },
})

Nie zapomnijmy dodać nanoid w linijkach importu na początku pliku:

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

Na następnej lekcji uzupełnimy nasze modele o niezbędne pola.