მონაცემების გაგზავნა სერვერიდან 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

ახლა კი ფაილის ბოლოს, worker-ის ექსპორტის წინ შევქმნათ მასივი 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 ჩვენი worker-ისთვის, მოდით გადავცეთ ამ worker-ს მასივი handlers. ამისთვის შევასწოროთ ბოლო სტრიქონი კოდი ფაილში:

export const worker = setupWorker(...handlers)

გახსენით თქვენი აპლიკაცია სტუდენტებით, ხოლო მასში ფაილი server.js. დააიმპორტეთ ფაილში მითითებული ინსტრუმენტები msw-დან. ამ გაკვეთილის მასალის შესწავლის შემდეგ, შექმენით ცარიელი მასივი მოთხოვნების დასაჭერი დამმუშავებლებისთვის. დაწერეთ მასში კოდი სტუდენტების GET-მოთხოვნის დამმუშავებლისთვის. როგორც გზა მოგცემთ იყოს '/fakeServer/students'.

ფაილის ბოლოს არ დაგავიწყდეთ მასივი დამმუშავებლების handlers worker-ს გადაცემა.