Banco de dados para o servidor no Redux

Na última aula, instalamos o MSW, que nos ajudará a simular a operação da nossa aplicação com o servidor. E para começar gostaríamos de carregar, ao iniciar a aplicação, os dados já existentes no servidor.

Vamos abrir nossa aplicação de produtos, e nela o arquivo server.js. Aqui já temos algumas linhas de código da última aula.

E a primeira pergunta que devemos nos fazer: onde os dados geralmente são armazenados? Sim, claro, em um banco de dados, responderemos sem hesitar. Portanto, vamos usar outra ferramenta incrível, que nos permitirá modelar nossos dados, e também fazer com que pareça que estamos trabalhando com um banco de dados SQL real.

A ferramenta que nos ajudará nisso - é a biblioteca @mswjs/data. Para instalá-la, digite no terminal o seguinte comando:

npm install @mswjs/data --save-dev

Agora vamos importar no arquivo server.js as coisas que precisamos:

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

E vamos criar nosso banco de dados improvisado. Para isso, usaremos a função factory. Faremos isso abaixo, após as linhas de importação e antes da exportação do worker:

export const db = factory({})

E quais dados vamos armazenar nele? Do servidor, devemos receber produtos, vendedores e reações dos usuários. Portanto, em nosso banco de dados, devemos criar três modelos, que o factory aceita na forma de objetos:

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

Como em um banco de dados SQL real, cada um de nossos modelos deve ter uma primary key. Tradicionalmente, vamos designar o campo id para isso, e vamos gerá-lo com a mesma biblioteca nanoid:

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

Vamos lembrar de adicionar o nanoid nas linhas de importação no início do arquivo:

import { nanoid } from '@reduxjs/toolkit'

Na próxima lição, vamos complementar nossos modelos com os campos necessários.

Abra sua aplicação de estudantes. Tendo revisado o material desta lição, instale o @mswjs/data para a sua aplicação.

Em seguida, crie o modelo de banco de dados db usando a função factory. Passe para ela três objetos (student, teacher, vote) para os seus dados, de forma semelhante à mostrada na lição.