Envío de datos desde el servidor mediante una solicitud GET en Redux

Así que tenemos una base de datos con datos. Lo primero que haremos al iniciar nuestra aplicación Redux es obtener los datos de productos del servidor. Para ello, necesitamos enviar una solicitud GET desde nuestra aplicación. Vamos a manejarla en el lado del servidor.

Abramos nuestra aplicación de productos, y en ella el archivo server.js. Para trabajar con solicitudes HTTP, necesitamos importar al archivo varias herramientas de msw, hagámoslo:

import { http, HttpResponse, delay } from 'msw'

También ajustemos inmediatamente para reflejar la realidad, es decir, posibles retardos en la red. Que el valor de nuestro retardo artificial sea 2 segundos, para que podamos ver cómo se cargan los datos. Escribámoslo después de const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Y ahora, al final del archivo, antes de exportar el worker, creemos un array para los manejadores de solicitudes de la API:

export const handlers = []

Y luego, entre corchetes, escribamos el primer manejador para interceptar la solicitud GET de productos:

export const handlers = [http.get()]

Como primer parámetro para http.get pasaremos una dirección falsa, por ejemplo '/fakeServer/products', y como segundo, un callback asíncrono:

export const handlers = [http.get('/fakeServer/products', async () => {})]

Ahora escribamos el código para este callback. Con su ayuda, extraeremos todos los productos de la base de datos. Aquí también usaremos la función serializeProduct, cuyo código escribimos en la lección anterior. Pasémosla a map. Luego, hagamos un retardo (como si la red fuera lenta) y devolvamos en response los objetos con datos de productos en formato JSON:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

Y el último toque. Hemos escrito el primer handler para nuestro worker, pasémosle a este worker el array handlers. Para ello, corrijamos la última línea de código en el archivo a:

export const worker = setupWorker(...handlers)

Abra su aplicación de estudiantes, y en ella el archivo server.js. Importe al archivo las herramientas indicadas de msw. Habiendo estudiado el material de esta lección, cree un array vacío de manejadores para interceptar solicitudes. Escriba en él el código para el manejador de la solicitud GET de estudiantes. Como ruta, que sea '/fakeServer/students'.

Al final del archivo, no olvide pasar el array de manejadores handlers al worker.