Redux колдонмосунда GET-сурамы аркылуу серверден маалымат жөнөтүү

Ошентип бизде маалыматтар базасы бар. Биздин Redux колдонмобузду иштеткенде бирінчи жасай турган ишибиз - серверден продукттардын маалыматтарын алуу. Бул үчүн биздин колдонмодон GET-сурам жөнөтүү керек. Аны сервер тарабында иштетели.

Продукттар колдонмосубузду ачалы, андан server.js файлын. HTTP-сурамдар менен иштөө үчүн, bизге 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 массивин берүүнү унутпаңыз.