Database voor de server in Redux

In de vorige les hebben we msw geïnstalleerd, wat ons zal helpen de werking van onze applicatie met de server te simuleren. En om te beginnen zouden we bij het opstarten van de applicatie de gegevens die al op de server aanwezig zijn willen laden.

Laten we onze productenapplicatie openen, en daarin het bestand server.js. Hier hebben we al een paar regels code van de vorige les.

En het eerste dat we ons moeten afvragen: waar worden gegevens meestal opgeslagen? Ja, natuurlijk in een database, zullen we zonder nadenken antwoorden. Daarom laten we nog een geweldige tool gebruiken, die ons in staat stelt ons gegevensmodel te maken, en ook om het te laten lijken alsof we werken met een echte SQL-database.

De tool die ons hierbij gaat helpen - is de bibliotheek @mswjs/data. Om deze te installeren, voer in de terminal volgende commando in:

npm install @mswjs/data --save-dev

Importeer nu in het bestand server.js de benodigde zaken:

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

En laten we onze geïmproviseerde database creëren. Hiervoor gebruiken we de functie factory. We doen dit onder de importregels en vóór de export van de worker:

export const db = factory({})

En welke gegevens gaan we erin opslaan? Van de server moeten we producten, verkopers en gebruikersreacties ontvangen. Dat betekent dat we in onze database drie modellen moeten creëren, die factory accepteert in de vorm van objecten:

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

Net als in een echte SQL-database moet elk van onze modellen een primary key hebben. Traditioneel wijzen we het veld id hiervoor aan, dat we zullen laten genereren door dezelfde nanoid bibliotheek:

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

Laten we niet vergeten om nanoid toe te voegen in de importregels bovenaan het bestand:

import { nanoid } from '@reduxjs/toolkit'

In de volgende les zullen we onze modellen aanvullen met de benodigde velden.

Open je applicatie met studenten. Na bestudering van de stof van deze les, installeer je @mswjs/data voor je eigen applicatie.

Creëer vervolgens het databasemodel db met behulp van de functie factory. Geef het drie objecten (student, teacher, vote) door voor je gegevens, vergelijkbaar met wat er in de les is getoond.