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:

terminalnpm install @mswjs/data --save-dev

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

api/server.jsimport { 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:

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsimport { nanoid } from '@reduxjs/toolkit'

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