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:

npm install @mswjs/data --save-dev

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

import { 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:

export 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:

export 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:

export 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:

import { nanoid } from '@reduxjs/toolkit'

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

Abra su aplicación de estudiantes. Habiendo revisado el material de esta lección, instale @mswjs/data para su aplicación.

Luego cree el modelo de base de datos db usando la función factory. Pásele tres objetos (student, teacher, vote) para sus datos, de manera similar a como se muestra en la lección.