Base de datos para el servidor en Redux

En la lección anterior instalamos msw, que nos ayudará a simular el trabajo de nuestra aplicación con el servidor. Y para empezar nos gustaría cargar al iniciar la aplicación los datos ya existentes en el servidor.

Abramos nuestra aplicación de productos, y en ella el archivo server.js. Aquí ya tenemos un par de líneas de código de la lección anterior.

Y lo primero que debemos preguntarnos: ¿dónde se almacenan normalmente los datos? Sí, por supuesto en una base de datos, responderemos sin pensarlo. Por lo tanto usemos otra herramienta genial, que nos permitirá crear un modelo de nuestros datos, y también hacer como si trabajáramos con una base de datos SQL real.

La herramienta que nos ayudará en esto - es la biblioteca @mswjs/data. Para instalarla, ingresa en la terminal el siguiente comando:

terminalnpm install @mswjs/data --save-dev

Ahora importemos en el archivo server.js lo que necesitamos:

api/server.jsimport { factory, oneOf, manyOf, primaryKey } from '@mswjs/data'

Y crearemos nuestra base de datos improvisada. Para esto usaremos la función factory. Lo haremos después de las líneas de importación y antes de exportar el worker:

api/server.jsexport const db = factory({})

¿Y qué datos almacenaremos en ella? Del servidor debemos obtener productos, vendedores y reacciones de usuarios. Significa que en nuestra base de datos debemos crear tres modelos, que factory acepta en forma de objetos:

api/server.jsexport const db = factory({
  product: {},
  seller: {},
  reaction: {},
})

Como en una base de datos SQL real, cada uno de nuestros modelos debe tener una primary key. Tradicionalmente, asignaremos este campo a id, y para generarlo usaremos la misma biblioteca nanoid:

api/server.jsexport const db = factory({
  product: {
    id: primaryKey(nanoid),
  },
  seller: {
    id: primaryKey(nanoid),
  },
  reaction: {
    id: primaryKey(nanoid),
  },
})

No olvidemos agregar nanoid en las líneas de importación al inicio del archivo:

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

En la siguiente lección complementaremos nuestros modelos con los campos necesarios.