Envio de dados do servidor via requisição GET no Redux

Então, temos um banco de dados. A primeira coisa que vamos fazer ao iniciar nossa aplicação Redux é obter os dados dos produtos do servidor. Para isso, precisamos enviar uma requisição GET de nossa aplicação. Vamos processá-la no lado do servidor.

Vamos abrir nossa aplicação de produtos, e nela o arquivo server.js. Para trabalhar com requisições HTTP, precisamos importar para o arquivo várias ferramentas do msw, vamos fazer isso:

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

Também vamos ajustar imediatamente para a realidade, ou seja, possíveis atrasos na rede. Vamos deixar o valor do nosso atraso artificial como 2 segundos, para podermos ver como os dados são carregados. Vamos escrevê-lo após const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

E agora, no final do arquivo, antes de exportar o worker, vamos criar um array para os handlers de requisições da API:

export const handlers = []

E então, entre colchetes, vamos escrever o primeiro handler para interceptar a requisição GET de produtos:

export const handlers = [http.get()]

Como primeiro parâmetro para http.get, vamos passar um endereço falso, por exemplo '/fakeServer/products', e como segundo, um callback assíncrono:

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

Agora vamos escrever o código para este callback. Com ele, vamos extrair todos os produtos do banco de dados. Aqui também usaremos a função serializeProduct, cujo código escrevemos na lição anterior. Vamos passá-la no map. Em seguida, vamos adicionar um atraso (como se a rede estivesse lenta) e retornar na response os objetos com os dados dos produtos no 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)
	}),
]

E o último retoque. Escrevemos o primeiro handler para nosso worker, vamos passar para este worker o array handlers. Para isso, vamos corrigir a última linha de código no arquivo para:

export const worker = setupWorker(...handlers)

Abra sua aplicação de estudantes, e nela o arquivo server.js. Importe para o arquivo as ferramentas indicadas do msw. Tendo estudado o material desta lição, crie um array vazio de handlers para interceptar requisições. Escreva nele o código para o handler da requisição GET de estudantes. Como caminho, use '/fakeServer/students'.

No final do arquivo, não se esqueça de passar o array de handlers handlers para o worker.