Komponentdan Reduxga thunk yuborish

Ushbu darsda biz React-komponenti ProductsList dan mahsulotlarni olish uchun thunk yuboramiz.

Keling, endi mahsulotlar ilovamizni ochaylik, uning ichidagi ProductsList.jsx faylini ochaylik. Boshlash uchun, biz yaratgan fetchProducts thunkini import qo'shamiz:

import { selectAllProducts, fetchProducts } from './productsSlice'

Shuningdek, bizga action creatorni yuborish uchun useDispatch hooki kerak bo'ladi va useEffect hooki, chunki bu yerda bizda yon ta'sir mavjud, chunki biz tarmoq bilan ishlaymiz, bu esa tashqi API hisoblanadi:

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

Endi ProductsList funksiyasi kodining birinchi qatorida, products ni e'lon qilishdan oldin, quyidagini qo'shamiz:

const dispatch = useDispatch()

Keyin, holatdan mahsulotlarni olishda biz so'rov holatini ham olamiz:

const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

Va darhol shundan so'ng, Reactga useEffect hooki yordamida aytamiz, komponent render bo'lgandan so'ng bizga mahsulotlarni olish kerak. Bu yerda bizga so'rov holati kerak bo'ladi, chunki biz uchun bunday so'rov faqat bir marta yuborilishi muhim:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

Hozir biz ilovamizni ishga tushirishimiz mumkin, undagi chap menyudagi 'Products' ni bosamiz. Biz hali mahsulotlar ro'yxatini ko'rmaymiz, lekin agar biz Redux DevTools ga kirsak, chap qismidagi oynada avtomatik ravishda yaratilgan (oldingi darsda aytganimdek) products/fetchProducts/pending va fulfilled actionlari paydo bo'ladi. Endi products/fetchProducts/fulfilled actionini bosing va uning payload maydonini ko'ring - mana bizning mahsulotlar ro'yxatimiz! Hurmat, zanjirimizdagi barcha bog'liqliklar - server, baza, mijoz va Redux - ilova uyg'un va birgalikda ishlaydi. Aytgancha, ko'rib turganingizdek bu yerda yana meta xususiyati mavjud, unda biz so'rov holatini ko'ramiz.

Yana bir narsaga e'tibor beramiz, sizda pending va, demak, fulfilled ikki marta ko'rinishi mumkin. Agar shunday bo'lsa, xafa bo'lmang, biz bu haqda keyinroq gapiramiz.

Talabalar ilovangizni oching. Undagi StudentsList.jsx faylini oching. Unga dars materialiga ko'ra kerakli hooklar va thunk ni import qiling.

Dars materiallarini o'rganib, so'rov holatini studentStatus oling, so'ngra, useEffect dan foydalanib, fetchStudents ni faqat studentStatus ning qiymati 'idle' bo'lganda yuboring.

Ilovangizni ishga tushiring, chap menyudagi 'Students' ni bosing, so'ngra brauzerdagi Redux DevTools kengaytmasini ishga tushiring, ushbu darsdagidek siz pending va fulfilled (va unda talabalar bilan payload) actionlarini ko'rishingiz kerak. Kengaytma yorliqlari orasida sayrang.