Redux'тан компоненттен thunk жиберүү

Бул сабакта биз продукттарды React-компонент ProductsList'тен алуу үчүн thunk жөнөтөбүз.

Эми продукттардын тиркемесибизди ачып, ProductsList.jsx файлына өтөлү. Башында, биз түзгөн thunk fetchProducts'ты импортко кошолу:

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])

Эми биз тиркемебизди иштете алабыз, сол жактагы менюдан 'Продукттар''га чыкылдаңыз. Продукттардын тизмесин азырынча көрбөй калабыз, бирок эгерде биз Redux DevTools'ко кирсек, анда терезечибиздин сол жагында автоматтык түрдө түзүлгөн (мен өткөн сабакта айткандай) products/fetchProducts/pending жана fulfilled экшндөрү пайда болот. Эми action products/fetchProducts/fulfilled жана анын талаасы payload'га чыкылдап көрөлү - мына биздин продукттардын кичинекей тизмеси! Ооба, биздин тизмектеги бардык бутактар - сервер, база, кардар жана Redux - тиркеме ийгиликтүү жана бирдикте иштейт. Ошондой эле, сиз көрүп тургандай бул жерде дагы meta касиети бар, анда биз сурамдын статусун көрө алабыз.

Дагы бир нерсени көңүлгө алалы, сиздерде pending жана, демек, fulfilled экөө тең эки жолу көрүнүшү мүмкүн. Эгерде мындай болсо, анткени күйүп кетпеңиз, биз бул жөнүндө кийинчерээк сүйлөшөбүз.

Студенттер менен тиркемеңизди ачыңыз. Андагы StudentsList.jsx файлын ачыңыз. Ага сабактын материалына ылайык керектүү хукуларды жана thunk'ты импорттоңуз.

Сабақтын материалын үйрөнүп, сурамдын статусун studentStatus алыңыз, андан кийин, useEffect'ти колдонуп, fetchStudents'ты гана жөнөтүңүз, эгерде studentStatus'тун мааниси - 'idle' болсо.

Тиркемеңизди иштетиңиз, сол жактагы тиркеме менюсунан 'Студенттер''га чыкылдаңыз, андан кийин браузердеги Redux DevTools кеңейтмесин иштетиңиз, бул сабактагыдай эле сиз pending жана fulfilled (жана андагы payload студенттер менен) менен экшндерди көрүшүңүз керек. Кеңейтменин кошумча барактары менен иштеңиз.