POST მოთხოვნის დამუშავება, გაგზავნილი thunk-ის საშუალებით Redux-ში

ჩვენ მივიღეთ პროდუქტების და გამყიდველების მონაცემები სერვერიდან და გამოვსახეთ ისინი აპლიკაციაში. მაგრამ thunk-ის საშუალებით შესაძლებელია არა მხოლოდ მონაცემების მიღება, არამედ გაგზავნაც. მოდით გავიგოთ, როგორ გავაკეთოთ ეს.

მას შემდეგ, რაც ჩვენ ვამატებთ ახალ პროდუქტს, ის რჩება ჩვენს store-ში, ანუ ჩვენი აპლიკაციის შიგნით. მოდით გავაკეთოთ ისე, რომ ახალი პროდუქტი შეინახოს სერვერზე.

მოდით დავიწყოთ სერვერით. აქ ჩვენ უკვე მოგვიწევს არა GET, არამედ POST მოთხოვნის დამუშავება, ვინაიდან სერვერზე ახლა მოვა პროდუქტის მონაცემები, რომელიც ჩვენ იქ შევინახავთ.

გავხსნათ ჩვენი აპლიკაცია პროდუქტებით და მასში ფაილი server.js. ვიპოვოთ მასში მასივი handlers და დავამატოთ მასში კიდევ ერთი დამმუშავებელი POST მოთხოვნისთვის. აქ ჩვენ ვიღებთ მოთხოვნის ტანსაც, ამიტომ callback-ში უნდა გადავცეთ request:

http.post('/fakeServer/products', async ({ request }) => {})

ახლა ფიგურულ ფრჩხილებში დავწეროთ კოდი ჩვენი კოლბეკის. დასაწყისისთვის გამოვყოთ მონაცემები მოთხოვნის და შეცდომის შემთხვევაში გავგზავნოთ სერვერიდან პასუხი, რომ ჩვენ ვერ შ�ინახეთ მონაცემები და სტატუსი 500:

http.post('/fakeServer/products', async ({ request }) => {
	const data = await request.json()

	if (data.content === 'error') {
		await delay(ARTIFICIAL_DELAY_MS)
		
		return new HttpResponse('server save error', {
			status: 500,
			headers: {
				'Content-Type': 'application/json',
			},
		})
	}
})

თუ მონაცემებთან დაკავშირებით ყველაფერი კარგადაა, მაშინ ჩვენ ბაზაში მონაცემებში ვიპოვით გამყიდველს id-ით, რომელიც ჩვენთან მოვიდა მოთხოვნაში და ჩავწერთ ამ გამყიდველს data-ში (გამყიდველის მონაცემები ბატონო, ჩვენც ინახება სერვერზე ;) ):

const seller = db.seller.findFirst({
	where: { id: { equals: data.seller } },
})
data.seller = seller

შემდეგ ბაზაში მონაცემებში შევქმნათ ამისთვის პროდუქტის ობიექტი რეაქციებით. და ახლა, ყოველივე აუცილებელი ველი პროდუქტისთვის რომ გვაქვს, შევქმნათ ბაზაში და თავად პროდუქტი:

data.reactions = db.reaction.create()
const product = db.product.create(data)

დავსვათ დაყოვნება და ბოლო სტრიქონში კოდის ჩვენი კოლბეკისთვის დავაბრუნოთ პასუხი პროდუქტით:

await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

ამით ჩვენ სრულად დავამთავრეთ სერვერით და მეტად აღარ დავუბრუნდებით.

სხვათა შორის, კიდევ ერთი სასარგებლო რამ. სტრიქონის შემდეგ export const worker = setupWorker(...handlers) შეგიძლიათ დაამატოთ შემდეგი კოდი:

worker.listHandlers().forEach((handler) => {
	console.log(handler.info.header)
})

და ახლა თქვენ შეგეძლებათ ნახოთ შედეგი თითოეული დამმუშავებლის მოქმედების ბრაუზერის კონსოლში.

რა თქმა უნდა ჩვენი სერვერი ნამდვილი არ არის და თუ ჩვენ ძალით განვაახლებთ გვერდს ბრაუზერში, ყველა ჩვენი ახალი ობიექტი პროდუქტებით გაქრება.

გახსენით თქვენი აპლიკაცია სტუდენტებით. გახსენით მასში ფაილი server.js. დაამატეთ მასივში handlers POST მოთხოვნის დამუშავება. ამ მოთხოვნის ტანში თქვენ მიიღებთ მონაცემებს ახალი დამატებული სტუდენტის.

თქვენი http.post-ის callback-ის ტანში გაშიფრეთ მონაცემები და შეცდომის შემთხვევაში გაგზავნეთ შესაბამისი პასუხი.

თუ ყველაფერი კარგადაა, მაშინ იპოვეთ მონაცემთა ბაზაში ლექტორი მიღებული id-ით და ჩაწერეთ ის მონაცემებში. ასევე ჩაწერეთ მონაცემებში, მონაცემთა ბაზის საფუძველზე შექმნილი ობიექტი votes.

შეგროვილი მონაცემებით შექმენით ობიექტი student ახალი სტუდენტით და გაგზავნეთ ის სერვერის პასუხში.