Redux-те компоненттен thunk жіберу

Осы сабақта біз React-компоненті ProductsList-тен өнімдерді алу үшін thunk жібереміз.

Енді өнімдер қолданбамызды ашып, ондағы ProductsList.jsx файлын ашайық. Алдымен біз жасаған fetchProducts thunk-ін импорттауға қосамыз:

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

Сондай-ақ бізге action creator-ді жіберу үшін useDispatch хукі қажет болады және useEffect хукі қажет, себебі мұнда бізде қосымша әсер бар, себебі біз желімен жұмыс істеп жатырмыз, бұл сыртқы API:

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

Енді ProductsList функциясының кодында бірінші жолға, products жариялауының алдына мынаны қосамыз:

const dispatch = useDispatch()

Әрі қарай стейттен өнімдерді алу кезінде біз сұрау статусын да шығарамыз:

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

Дәл осыдан кейін useEffect хукі арқылы React-ке компонент рендерленгеннен кейін өнімдерді алу керек екенін айтамыз. Мұнда бізге сұрау статусы қажет, себебі біз үшін мұндай сұрау тек бір рет жіберілуі маңызды:

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

Қазір біз қолданбамызды іске қоса аламыз, онда сол жақтағы мәзірдегі 'Products' батырмасын басамыз. Біз әлі де өнімдер тізімін көрмейміз, бірақ егер біз Redux DevTools-қа кірсек, онда терезешіңің сол жағында мен өткен сабақта айтқанымдай автоматты түрде жасалған экшендер products/fetchProducts/pending және fulfilled пайда болады. Енді products/fetchProducts/fulfilled action-ін басып, оның payload өрісін қарайық - міне біздің өнімдер тізімішіміз! Ура, біздің тізбектегі барлық буындар - сервер, дерекқор, клиент және Redux - қолданба үйлесімді және бірлесіп жұмыс істейді. Айтпақшы, мұнда сіз meta қасиетін де көре аласыз, онда біз сұрау статусын көреміз.

Тағы бір нәрсеге назар аударайық, сізде pending және, демек, fulfilled екі рет көрсетілуі мүмкін. Егер солай болса, үмітіңізді үзмейік, біз бұл турале кейінірек сөйлесеміз.

Студенттер қолданбаңызды ашыңыз. Ондағы StudentsList.jsx файлын ашыңыз. Оған сабақ материалына сәйкес қажетті хукілер мен thunk-ті импорттаңыз.

Сабақ материалын зерттей отырып, studentStatus сұрау статусын алыңыз, содан кейін, useEffect пайдаланып, fetchStudents-ті тек studentStatus мәні 'idle' болған жағдайда ғана жіберіңіз.

Қолданбаңызды іске қосыңыз, қолданбаның сол жақ мәзіріндегі 'Students' батырмасын басыңыз, содан кейін браузерде Redux DevTools кеңейтпесін іске қосыңыз, осы сабақтағыдай сіз pending және fulfilled (және онда студенттермен payload) экшендерін көруіңіз керек. Кеңейтімнің қойындыларын тексеріп көріңіз.