Database per il server in Redux

Nella lezione precedente abbiamo installato msw, che ci aiuterà a simulare il funzionamento della nostra applicazione con il server. E per cominciare vorremmo caricare all'avvio dell'applicazione i dati già presenti sul server.

Apriamo la nostra applicazione di prodotti, e in essa il file server.js. Qui abbiamo già un paio di righe di codice dalla lezione precedente.

E la prima cosa che dobbiamo chiederci: dove vengono solitamente memorizzati i dati? Sì, certamente in un database, risponderemo senza pensarci. Quindi usiamo un altro strumento fantastico, che ci permetterà di creare un modello dei nostri dati, e anche di fare in modo che sia come se stessimo lavorando con un vero database SQL.

Lo strumento che ci aiuterà in questo - è la libreria @mswjs/data. Per installarla, digita nel terminale il seguente comando:

npm install @mswjs/data --save-dev

Ora importiamo nel file server.js le cose che ci servono:

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

E creiamo il nostro database improvvisato. Per questo useremo la funzione factory. Lo faremo sotto alle righe di importazione e prima dell'esportazione del worker:

export const db = factory({})

E quali dati memorizzeremo in esso? Dal server dovremmo ricevere prodotti, venditori e reazioni utente. Quindi nel nostro database dobbiamo creare tre modelli, che factory accetta come oggetti:

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

Come in un vero database SQL, ogni nostro modello deve avere una primary key. Tradizionalmente, assegneremo a questo campo id, che genereremo con la stessa libreria nanoid:

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

Non dimentichiamo di aggiungere nanoid nelle righe di importazione all'inizio del file:

import { nanoid } from '@reduxjs/toolkit'

Nella prossima lezione completeremo i nostri modelli con i campi necessari.

Aprite la vostra applicazione con gli studenti. Dopo aver familiarizzato con il materiale di questa lezione, installate @mswjs/data per la vostra applicazione.

Poi create il modello di database db usando la funzione factory. Passatele tre oggetti (student, teacher, vote) per i vostri dati, in modo simile a quanto mostrato nella lezione.