Слање података са сервера преко GET захтева у Redux-у

Дакле, имамо базу са подацима. Прво што ћемо урадити при покретању наше Redux апликације јесте да са сервера добијемо податке о производима. За то нам је потребно из наше апликације да пошаљемо GET захтев. Хајде да га обрадимо на страни сервера.

Отворимо нашу апликацију са производима, а у њој фајл server.js. Да бисмо радили са HTTP захтевима, потребно је да импортујемо у фајл неколико алата из msw, хајде да то урадимо:

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

Такође одмах направимо исправке за реалност, односно могућа кашњења у мрежи. Нека вредност наше вештачке закашњења буде 2 секунде, да бисмо видели како се подаци учитавају. Напишимо је после const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

А сада на крају фајла пред извоз воркера направимо низ за API руковаоце захтевима:

export const handlers = []

А затим у угластим заградама напишимо првог руковаоца за пресретање GET захтева за производима:

export const handlers = [http.get()]

Први параметар за http.get проследићемо неку лажну адресу, на пример '/fakeServer/products', а други асинхрони callback:

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

Сада напишимо код за овај callback. Њиме ћемо извући све производе из базе података. Овде ћемо такође користити функцију serializeProduct, чији смо код написали на прошлом часу. Хајде да је проследимо у map. Затим направимо закашњење (као да мрежа спори) и вратимо у response објекте са подацима производа у виду 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)
	}),
]

И на крају. Написали смо првог handler-а за нашег воркера, хајде да овом воркеру проследимо низ handlers. Зато исправимо последњи ред кода у фајлу на:

export const worker = setupWorker(...handlers)

Отворите вашу апликацију са студентима, а у њој фајл server.js. Импортујте у фајл назначене алате из msw. Проучавајући материјал овог часа, направите празан низ руковалаца за пресретање захтева. Напишите у њему код за руковаоца GET захтева за студенте. Као пут нека код вас буде '/fakeServer/students'.

На крају фајла не заборавите да проследите низ руковалаца handlers воркеру.