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

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

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

products/NewProductForm.jsximport { addProduct } from './productsSlice'

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

products/NewProductForm.jsxconst [requestStatus, setRequestStatus] = useState('idle')

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

products/NewProductForm.jsxconst canBeSaved =
  [name, desc, price, amount, sellerId].every(Boolean) &&
  requestStatus === 'idle'

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

products/NewProductForm.jsxconst onSaveProductClick = async () => {
  if (canBeSaved) {}
}

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

products/NewProductForm.jsxconst 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 සඳහා කේතය මෙලෙස පෙනෙනු ඇත:

products/NewProductForm.jsxconst 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 වෙනස් වන ආකාරය බලන්න.