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:

npm install @mswjs/data --save-dev

Teraz zaimportujmy w pliku server.js potrzebne nam rzeczy:

import { 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:

export 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:

export 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:

export 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:

import { nanoid } from '@reduxjs/toolkit'

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

Otwórz twoją aplikację ze studentami. Zapoznawszy się z materiałem tej lekcji, zainstaluj @mswjs/data dla twojej aplikacji.

Następnie stwórz model bazy danych db za pomocą funkcji factory. Przekaż jej trzy obiekty (student, teacher, vote) dla twoich danych, podobnie jak pokazano na lekcji.