Thunk жұмысының нәтижелерін Redux компонентінде көрсету

Алдыңғы сабақта біз POST-сұраныс жібердік thunk addProduct көмегімен. Енді оның жұмысының нәтижелерін компонентте көрсетейік.

Өнімдерімізбен қосымшамызды ашып, ондағы NewProductForm.jsx файлын ашайық, себебі бұл компонент жаңа өнімді қосуға жауапты. Импорт жолдарына қарайық. productAdded экшенін импорттауды thunk addProduct импорттауға ауыстырайық:

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

Енді, біз слайсте сұраныс статусын 'pending' бақыламағандықтан, пайдаланушының өнімді сақтау түймесін бір рет баса алатынын жасайық, себебі бізге бірдей қайталанатын сұраныстар қажет емес. Ол үшін тағы бір локальді стейт ашайық:

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

Әрі қарай обработчиктерден кейін және onSaveProductClick функциясының алдында форманың барлық өрістері толтырылғанын және сұраныс статусы 'idle' күйінде екенін тексеретін код жазайық:

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

Содан кейін біз onSaveProductClick үшін кодты өзгертеміз. Біріншіден, бұл асинхронды функция болады және ол жоғарыда көрсетілген шарт дұрыс болса орындалады:

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

Біз слайсте 'rejected' статусын бақыламасақ та, қатені консольге шығара аламыз, бұл үшін try-catch құрылымын қолданамыз. Сондай-ақ біз сұраныс орындалғаннан кейін локальді стейтті қайтадан 'idle' күйіне орнататын finally қосамыз:

products/NewProductForm.jsxconst 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 үшін толық код былай көрінеді:

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('өнімді сақтау қатесі: ', err)
    } finally {
      setRequestStatus('idle')
    }
  }
}

Қосымшамызды іске қосып, жаңа өнімді қосуды байқап көрейік. Көріп отырғаныңыздай, сәтті сұраныс жағдайында өрістер тазартылады және жаңа өнім өнімдер тізіміне қосылады. Сондай-ақ браузердегі Redux DevTools-ке кіріп, оның қойындыларымен танысып, экшендерге және стейтіңіздің қалай өзгеретініне назар аударыңыз.