Datenbank für den Server in Redux

In der letzten Lektion haben wir msw installiert, das uns dabei helfen wird, die Arbeit unserer Anwendung mit dem Server zu simulieren. Und zu Beginn würden wir gerne bereits auf dem Server vorhandene Daten laden, wenn die Anwendung startet.

Lassen Sie uns unsere Produktanwendung öffnen, und darin die Datei server.js. Hier haben wir bereits ein paar Codezeilen aus der vorherigen Lektion.

Und die erste Frage, die wir uns stellen sollten: Wo werden Daten normalerweise gespeichert? Ja, natürlich in einer Datenbank, werden wir ohne nachzudenken antworten. Deshalb verwenden wir noch ein weiteres tolles Tool, das es uns ermöglicht, ein Modell unserer Daten zu erstellen und es so aussehen zu lassen, als ob wir mit einer echten SQL-Datenbank arbeiten.

Das Tool, das uns dabei helfen wird - ist die Bibliothek @mswjs/data. Um sie zu installieren, geben Sie im Terminal folgenden Befehl ein:

npm install @mswjs/data --save-dev

Jetzt importieren wir in der Datei server.js die benötigten Dinge:

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

Und erstellen wir unsere improvisierte Datenbank. Dazu verwenden wir die Funktion factory. Wir tun dies unten nach den Importzeilen und vor dem Export des Workers:

export const db = factory({})

Und welche Daten werden wir darin speichern? Vom Server sollten wir Produkte, Verkäufer und Benutzerreaktionen erhalten. Also müssen wir in unserer Datenbank drei Modelle erstellen, die factory in Form von Objekten entgegennimmt:

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

Wie in einer echten SQL-Datenbank muss jedes unserer Modelle einen primary key haben. Traditionell werden wir das Feld id dafür festlegen, das wir mit derselben nanoid-Bibliothek generieren werden:

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

Vergessen wir nicht, nanoid in den Importzeilen am Anfang der Datei hinzuzufügen:

import { nanoid } from '@reduxjs/toolkit'

In der nächsten Lektion werden wir unsere Modelle um die notwendigen Felder ergänzen.

Öffnen Sie Ihre Anwendung mit den Studenten. Nachdem Sie sich mit dem Material dieser Lektion vertraut gemacht haben, installieren Sie @mswjs/data für Ihre Anwendung.

Erstellen Sie anschließend ein Datenbankmodell db mit Hilfe der Funktion factory. Übergeben Sie ihr drei Objekte (student, teacher, vote) für Ihre Daten, ähnlich wie in der Lektion gezeigt.