Redux හි සංරචකයක් තුළ thunk වැඩ කිරීමේ ප්‍රතිඵල ප්‍රදර්ශනය කිරීම

පසුගිය පාඩමේදී, අපි POST ඉල්ලීමක් යවන ලදී thunk addProduct භාවිතා කරමින්. දැන් අපි එහි වැඩ කිරීමේ ප්‍රතිඵල සංරචකයේ ප්‍රදර්ශනය කරමු.

අපගේ නිෂ්පාදන යෙදුම විවෘත කරමු, සහ එහි ඇති ගොනුව NewProductForm.jsx, මෙම සංරචකය නව නිෂ්පාදනයක් එකතු කිරීම සඳහා යොමු වන්නේ නිසා. ආයාත කිරීම් වල ඇති පේළි දෙස බලමු. ක්‍රියාව productAdded ආයාත කිරීම thunk addProduct ආයාත කිරීම සමඟ ප්‍රතිස්ථාපනය කරමු:

import { addProduct } from './productsSlice'

දැන්, slice එකේ අපි ඉල්ලීමේ තත්ත්වය 'pending' නිරීක්ෂණය නොකරන නිසා, අපි පරිශීලකයාට නිෂ්පාදනය සුරැකීම සඳහා බොත්තම එක් වරක් පමණක් ක්ලික් කළ හැකි වන පරිදි කරමු, මන්ද අපට එකම නැවත නැවත ඉල්ලීම් අවශ්‍ය නැත. මේ සඳහා අපි තවත් එක් ප්‍රාදේශීය state එකක් නිර්මාණය කරමු:

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

ඊළඟට, පාලක ක්‍රියාත්මක කරන්නන්ට පසුව සහ ශ්‍රිතයට පෙර onSaveProductClick කේතය ලියන්න, එහිදී අපි පරීක්ෂා කරමු, අපගේ ආකෘතියේ සියලු ක්ෂේත්‍ර පුරවා ඇත්ද සහ ඉල්ලීමේ තත්ත්වය 'idle' තුළ පවතීද:

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

ඊළඟට අපි onSaveProductClick සඳහා කේතය වෙනස් කරමු. පළමුවෙන්ම, මෙය async ශ්‍රිතයක් වනු ඇත සහ එය ක්‍රියාත්මක වනු ඇත, ඉහත සඳහන් කොන්දේසිය සත්‍ය නම්:

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

අපි slice එකේ තත්ත්වය නිරීක්ෂණය නොකළත් 'rejected', අපට සමන්විතයේ දෝෂය පෙන්විය හැකිය, මේ සඳහා අපි භාවිතා කරමු try-catch ගොඩනැගීම. මෙහිදී අපි finally එකත් එකතු කරමු, ඉල්ලීම ක්‍රියාත්මක කිරීමෙන් පසු ප්‍රාදේශීය state එක නැවත සකසන්න 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error(save product error: , err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

catch සහ finally බ්ලොක් සමඟ අපි සකස් කළා, දැන් try බ්ලොක් සඳහා කේතය ලියමු. මෙහිදී අපි ප්‍රාදේශීය තත්ත්වය 'in pogress' ලෙස සකසමු, අපට නැවත ලැබෙන තුරු thunk වැඩ කිරීමේ ප්‍රතිඵලයක් ලෙස, ඉන්පසු අපගේ thunk addProduct යවන්න. භාවිතා කිරීම try-catch ගොඩනැගීම ප්‍රතිචාර වර්ගය අනුව අපට RTK ශ්‍රිතය උපකාරී වේ unwrap, එය නැවත ලැබෙන පොරොමිසයට එකතු කරයි. ඉන්පසු, ඉල්ලීම සාර්ථක නම් අපි ප්‍රාදේශීය state ඒවායේ ආරම්භක තත්ත්වයන්ට සකසමු. සම්පූර්ණ 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('save product error: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

අපගේ යෙදුම ආරම්භ කර නව නිෂ්පාදනයක් එකතු කිරීමට උත්සාහ කරමු. ඔබට පෙනෙන පරිදි, සාර්ථක ඉල්ලීමකදී ක්ෂේත්‍ර හිස් වන අතර නව නිෂ්පාදනය එකතු වේ නිෂ්පාදන ලැයිස්තුවට. බ්‍රවුසරයේදී Redux DevTools වෙත ඇතුළු වී එහි ටැබ් වලින් ගමන් කරන්න, ක්‍රියා සහ ඔබේ state වෙනස් වන ආකාරය බලන්න.

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කරන්න. එහි ගොනුව විවෘත කරන්න NewStudentForm.jsx. තවත් ප්‍රාදේශීය state එකක් එකතු කරන්න requestStatus, සහ එය මුලදී 'idle' ලෙස සකසන්න. පාඩමේ ද්‍රව්‍ය හමුවී, සූදානම් කරන්න විචල්‍යය canBeSaved, එහි ආධාරයෙන් නව ශිෂ්‍ය දත්ත සුරැකීමේ බොත්තම ක්‍රියාත්මක/නොක්‍රිය වනු ඇත, එය රඳා පවතී requestStatus හි අගය මත සහ ක්ෂේත්‍ර පුරවා ඇති ද යන්න මත.

onSaveStudentClick සඳහා async කේතය ලියන්න, එය requestStatus හි අගය වෙනස් කරනු ඇත තත්වය අනුව, thunk addProduct යවන්න නව ශිෂ්‍ය දත්ත සමඟ, ක්ෂේත්‍ර හිස් කරන්න සාර්ථක ඉල්ලීමකදී සහ console එකේ දෝෂය පෙන්වන්න අසමත් වූ විට, පාඩමේ පෙන්වා ඇති පරිදි. මේ සඳහා භාවිතා කරන්න try-catch ගොඩනැගීම සහ RTK ශ්‍රිතය unwrap.

ඔබේ යෙදුම ආරම්භ කරන්න, නව ශිෂ්‍යයෙකු එකතු කර සියල්ල ක්‍රියාත්මක වන බවට වග බලා ගන්න.