Thunk-ის მუშაობის შედეგების კომპონენტში გამოტანა Redux-ში

წინა გაკვეთილზე ჩვენ გავგზავნეთ POST-მოთხოვნა thunk addProduct-ის დახმარებით. ახლა კი გამოვსახოთ მისი მუშაობის შედეგები კომპონენტში.

გავხსნათ ჩვენი პროდუქტების აპლიკაცია, და მასში ფაილი NewProductForm.jsx, რადგან ეს კომპონენტი პასუხისმგებელია ახალი პროდუქტის დამატებაზე. შევხედოთ იმპორტების სტრიქონებს. შევცვალოთ ექშენის productAdded იმპორტი, thunk-ის addProduct იმპორტით:

import { addProduct } from './productsSlice'

ახლა, რადგან ჩვენ სლაისში არ ვითვალთვალებთ მოთხოვნის 'pending' სტატუსს, მოდით გავაკეთოთ ისე, რომ მომხმარებელმა შეძლოს პროდუქტის შენახვის ღილაკზე მხოლოდ ერთხელ დააწკაპუნოს, ბოლოს და ბოლოს არ გვჭირდება იგივე განმეორებითი მოთხოვნები. ამისთვის შევქმნათ კიდევ ერთი ლოკალური სტეითი:

const [requestStatus, setRequestStatus] = useState('idle')

შემდეგ, ჰენდლერების შემდეგ და ფუნქციის onSaveProductClick წინ დავწეროთ კოდი, რომელშიც შევამოწმებთ, ყველა თუ არის შევსებული ფორმის ველი და არის თუ არა მოთხოვნის სტატუსი 'idle'-ში:

const canBeSaved =
	[name, desc, price, amount, sellerId].every(Boolean) &&
	requestStatus === 'idle'

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

const onSaveProductClick = async () => {
	if (canBeSaved) {}
}

მიუხედავად იმისა, რომ ჩვენ სლაისში არ ვითვალთვალებთ 'rejected' სტატუსს, მაინც შეგვიძლია გამოვიტანოთ კონსოლში შეცდომა, ამისთვის გამოვიყენოთ კონსტრუქცია try-catch. ასევე აქ ჩვენ დავამატებთ finally-ს, რათა მოთხოვნის შესრულების შემდეგ კვლავ დავაყენოთ ლოკალური სტეითი 'idle'-ში:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('პროდუქტის შენახვის შეცდომა: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

catch და finally ბლოკებთან ჩვენ გავერკვიეთ, მოდით დავწეროთ კოდი try ბლოკისთვის. აქ ჩვენ დავაყენებთ ლოკალურ სტატუსს 'in pogress'-ში, სანამ არ დაუბრუნდება რაიმე პასუხი thunk-ის მუშაობის შედეგად, შემდეგ კი გავგზავნით ჩვენს thunk-ს addProduct. კონსტრუქციის try-catch გამოყენება პასუხის ტიპის მიხედვით დაგვეხმარება RTK-ის ფუნქცია unwrap, რომელსაც ის ამატებს დაბრუნებულ პრომისს. შემდეგ, თუ მოთხოვნა წარმატებული იყო, ჩვენ ვაყენებთ ლოკალურ სტეითებს მათ საწყის მდგომარეობებში. სრული კოდი onSaveProductClick-ისთვის ასე გამოიყურება:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
			setRequestStatus('in progress')
			await dispatch(
				addProduct({ name, desc, price, amount, seller: sellerId })).unwrap()
			setName('')
			setDesc('')
			setPrice(0)
			setAmount(0)
			setSellerId('')
		} catch (err) {
			console.error('პროდუქტის შენახვის შეცდომა: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

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

გახსენით თქვენი სტუდენტების აპლიკაცია. გახსენით მასში ფაილი NewStudentForm.jsx. დაამატეთ კიდევ ერთი ლოკალური სტეითი requestStatus, და დაუყენეთ ის თავდაპირველად 'idle'-ში. გაკვეთილის მასალასთან გაეცნოთ, შექმენით ცვლადი canBeSaved, რომლის დახმარებითაც ახალი სტუდენტის მონაცემების შენახვის ღილაკი იმუშავებს/არ იმუშავებს, requestStatus-ის მნიშვნელობის და ველების შევსების მიხედვით.

დაწერეთ ასინქრონული კოდი onSaveStudentClick-ისთვის, რომელიც შეცვლის requestStatus-ის მნიშვნელობას სიტუაციის მიხედვით, გააგზავნის thunk-ს addProduct ახალი სტუდენტის მონაცემებით, გაასუფთავებს ველებს წარმატებული მოთხოვნის შემთხვევაში და გამოიტანს კონსოლში შეცდომას წარუმატებლობის შემთხვევაში, როგორც ეს ნაჩვენები იყო გაკვეთილზე. გამოიყენეთ ამისთვის კონსტრუქცია try-catch და RTK-ის ფუნქცია unwrap.

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