Procesamiento de una solicitud POST enviada usando thunk en Redux

Hemos obtenido los datos de productos y vendedores del servidor y los mostramos en la aplicación. Pero con thunk no solo se pueden obtener, sino también enviar datos. Aprendamos cómo hacerlo.

Después de agregar un nuevo producto, este permanece en nuestro store, es decir, dentro de nuestra aplicación. Hagamos que el nuevo producto se guarde en el servidor.

Empecemos con el servidor. Aquí tendremos que procesar no una solicitud GET, sino una solicitud POST, ya que al servidor ahora llegarán los datos del producto, que guardaremos allí.

Abramos nuestra aplicación de productos, y en ella el archivo server.js. Encontremos en él el array handlers y agreguemos otro manejador para la solicitud POST. Aquí recibiremos también el cuerpo de la solicitud, por lo que en el callback debemos pasar request:

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

Ahora, dentro de las llaves, escribamos el código de nuestro callback. Para empezar, extraigamos los datos de la solicitud y en caso de error enviemos desde el servidor una respuesta indicando que no pudimos guardar los datos y el estado 500:

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

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

Si los datos están correctos, entonces en la base de datos buscaremos al vendedor por el id que nos llegó en la solicitud y escribiremos este vendedor en data (¡los datos del vendedor también se almacenan en nuestro servidor! ;) ):

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

A continuación, en la base de datos crearemos un objeto de reacciones para este producto. Y ahora, teniendo todos los campos necesarios para el producto, creemos en la base de datos el producto en sí:

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

Pongamos un retraso y en la última línea de código para nuestro callback devolvamos la respuesta con el producto:

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

Con esto, hemos terminado completamente con el servidor y no volveremos a él.

Por cierto, otra cosa útil. Después de la línea export const worker = setupWorker(...handlers) puedes agregar el siguiente código:

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

Y ahora podrás ver el resultado de la ejecución de cada manejador en la consola del navegador.

Por supuesto, nuestro servidor no es real y si forzamos la actualización de la página en el navegador, todos nuestros nuevos objetos de productos desaparecerán.

Abre tu aplicación de estudiantes. Abre en ella el archivo server.js. Agrega en el array handlers el manejo de una solicitud POST. En el cuerpo de esta solicitud recibirás los datos del nuevo estudiante agregado.

En el cuerpo del callback para tu http.post desempaqueta los datos y en caso de error envía la respuesta correspondiente.

Si todo está bien, entonces encuentra en la base de datos al profesor por el id recibido y escríbelo en los datos. Escribe también en los datos, el objeto votes creado a partir de la base de datos.

Con los datos recopilados crea un objeto student con el nuevo estudiante y envíalo en la respuesta del servidor.