Database til serveren i Redux

I den sidste lektion installerede vi msw, som vil hjælpe os med at efterligne arbejdet af vores applikation med serveren. Og til at starte med ville vi gerne hente de allerede eksisterende data på serveren, når applikationen starter.

Lad os åbne vores applikation med produkter, og i den filen server.js. Her har vi allerede et par linjer kode fra den forrige lektion.

Og det første, vi skal spørge os selv: hvor opbevares data normalt? Ja, selvfølgelig i en database, svarer vi uden at tænke. Så lad os bruge endnu et fantastisk værktøj, som vil tillade os at oprette en model af vores data, og også gøre det, som om vi arbejder med en rigtig SQL-database.

Værktøjet, der vil hjælpe os med dette - er biblioteket @mswjs/data. For at installere det, skriv i terminalen følgende kommando:

npm install @mswjs/data --save-dev

Nu importerer vi i filen server.js de ting, vi har brug for:

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

Og lad os oprette vores improviserede database. For at gøre dette bruger vi funktionen factory. Vi gør dette under importlinjerne og før eksporten af workeren:

export const db = factory({})

Og hvilke data vil vi opbevare i den? Fra serveren skal vi modtage produkter, sælgere og brugerreaktioner. Det betyder at vi i vores database skal oprette tre modeller, som factory accepterer i form af objekter:

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

Som i en rigtig SQL-database skal hver af vores modeller have en primary key. Traditionelt vil vi tildele id som et sådant felt, som vi vil generere med det samme nanoid-bibliotek:

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

Lad os ikke glemme at tilføje nanoid i importlinjerne i starten af filen:

import { nanoid } from '@reduxjs/toolkit'

I næste lektion vil vi udfylde vores modeller med de nødvendige felter.

Åbn din applikation med studerende. Efter at have gennemgået materialet i denne lektion, installer @mswjs/data til din applikation.

Derefter opret en databasemodel db ved hjælp af funktionen factory. Overgiv den tre objekter (student, teacher, vote) for dine data, på samme måde som vist i lektionen.