Databas för servern i Redux

I föregående lektion installerade vi msw, som kommer att hjälpa oss att simulera vår applikations arbete med servern. Och till att börja med skulle vi vilja ladda befintliga data från servern när applikationen startas.

Låt oss öppna vår produktapplikation, och i den filen server.js. Här har vi redan några rader kod från föregående lektion.

Och det första vi måste fråga oss själva: var lagras data vanligtvis? Ja, självklart i en databas, svarar vi utan att tveka. Därför låt oss använda ytterligare ett fantastiskt verktyg som tillåter oss att skapa en modell av vår data, och även göra så att det känns som om vi arbetar med en riktig SQL-databas.

Verktyget som hjälper oss med detta - är biblioteket @mswjs/data. För att installera det, skriv in i terminalen följande kommando:

npm install @mswjs/data --save-dev

Importera nu i filen server.js de saker vi behöver:

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

Och låt oss skapa vår improviserade databas. För att göra detta använder vi funktionen factory. Vi gör detta nedan efter importraderna och före exporten av workern:

export const db = factory({})

Och vilken data ska vi lagra i den? Från servern ska vi få produkter, försäljare och användar-reaktioner. Betyder att i vår databas måste vi skapa tre modeller, som factory accepterar i form av objekt:

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

Precis som i en riktig SQL-databas ska varje modell ha en primary key. Traditionellt kommer vi att utse id till ett sådant fält, som vi genererar med samma nanoid-bibliotek:

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

Glöm inte att lägga till nanoid i importraderna i början av filen:

import { nanoid } from '@reduxjs/toolkit'

I nästa lektion kommer vi att komplettera våra modeller med nödvändiga fält.

Öppna din applikation med studenter. Efter att ha bekantat dig med materialet i den här lektionen, installera @mswjs/data för din applikation.

Skapa sedan en databasmodell db med hjälp av funktionen factory. Skicka till den tre objekt (student, teacher, vote) för era data, på samma sätt som visas i lektionen.