Processamento de uma requisição POST enviada usando thunk no Redux

Nós obtivemos os dados de produtos e vendedores do servidor e os exibimos na aplicação. Mas com o thunk, você pode não apenas obter, mas também enviar dados. Vamos aprender como fazer isso.

Depois de adicionarmos um novo produto, ele permanece em nosso store, ou seja, dentro da nossa aplicação. Vamos fazer com que o novo produto seja salvo no servidor.

Vamos começar pelo servidor. Aqui, já precisaremos processar não uma requisição GET, mas uma requisição POST, pois para o servidor agora chegarão os dados do produto, que salvaremos lá.

Vamos abrir nossa aplicação com os produtos, e nela o arquivo server.js. Vamos encontrar nele o array handlers e adicionar mais um manipulador para a requisição POST. Aqui nós aceitaremos também o corpo da requisição, portanto no callback devemos passar o request:

http.post('/fakeServer/products', async ({ request }) => {})

Agora, dentro das chaves, vamos escrever o código do nosso callback. Para começar, vamos extrair os dados da requisição e em caso de erro, enviar do servidor uma resposta informando que não foi possível salvar os dados e o status 500:

http.post('/fakeServer/products', async ({ request }) => {
	const data = await request.json()

	if (data.content === 'error') {
		await delay(ARTIFICIAL_DELAY_MS)
		
		return new HttpResponse('erro de salvamento no servidor', {
			status: 500,
			headers: {
				'Content-Type': 'application/json',
			},
		})
	}
})

Se os dados estiverem corretos, então no banco de dados encontraremos o vendedor pelo id que nos chegou na requisição e escreveremos esse vendedor em data (afinal, os dados do vendedor também estão armazenados no servidor ;) ):

const seller = db.seller.findFirst({
	where: { id: { equals: data.seller } },
})
data.seller = seller

Em seguida, no banco de dados, criaremos para este produto um objeto com reações. E agora, tendo todos os campos necessários para o produto, vamos criar no banco o próprio produto:

data.reactions = db.reaction.create()
const product = db.product.create(data)

Vamos adicionar um atraso e na última linha de código do nosso callback, retornar a resposta com o produto:

await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

Com isso, terminamos completamente com o servidor e não voltaremos mais a ele.

Aliás, mais uma coisa útil. Após a linha export const worker = setupWorker(...handlers) você pode adicionar o seguinte código:

worker.listHandlers().forEach((handler) => {
	console.log(handler.info.header)
})

E agora você poderá ver o resultado da execução de cada manipulador no console do navegador.

Claro, nosso servidor não é real e se atualizarmos forçadamente a página no navegador, todos os nossos novos objetos de produtos desaparecerão.

Abra sua aplicação com os estudantes. Abra nela o arquivo server.js. Adicione no array handlers o processamento da requisição POST. No corpo desta requisição, você receberá os dados do novo estudante adicionado.

No corpo do callback para o seu http.post desempacote os dados e em caso de erro, envie a resposta correspondente.

Se estiver tudo ok, então encontre no banco de dados o professor pelo id recebido e escreva-o nos dados. Escreva também nos dados, um objeto votes criado com base no banco de dados.

Com os dados coletados, crie um objeto student com o novo estudante e envie-o na resposta do servidor.