Ирсоли thunk аз компонент ба Redux

Дар ин дарс мо thunk-ро барои гирифтани маҳсулот аз компоненти React-ӣ ProductsList мефиристем.

Биёед акнун барномаи худро бо маҳсулот кушода, ва дар он файли ProductsList.jsx-ро кушоем. Аввалан ба воридоти thunk-и fetchProducts, ки мо сохтем, илова кунем:

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

Инчунин ба мо ҳуки useDispatch барои фиристодани action creator-и мо ва ҳуки 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)

Ва ҳамин пас аз ин ба React бо ёрии ҳуки useEffect мегӯем, ки ба мо пас аз тасвири компонент гирифтани маҳсулот лозим аст. Дар ин ҷо ҳолати дархост ба мо лозим аст, зеро барои мо муҳим аст, ки чунин дархост танҳо як бор фиристода шавад:

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

Акнун мо метавонем барномаи худро оғоз кунем, дар он рӯй 'Products'-ро дар менюи чап клик кунем. Рӯйхати маҳсулотро мо ҳоло намебинем, аммо агар мо ба Redux DevTools-и худ дароем, пас дар қисми чапи даричаи мо экшенҳои тавлидшудаи автоматӣ (ҳамон тавре ки ман дар дарси гузашта гуфтам) products/fetchProducts/pending ва fulfilled пайдо мешаванд. Акнун биёед ба экшени products/fetchProducts/fulfilled ва майдони он payload клик кунем - ин ҷост рӯйхати маҳсулоти мо! Ҳура, ҳамаи занҷирҳои мо дар занҷир - сервер, пойгоҳи додаҳо, мизбон ва барномаи Redux - ба якҷоягӣ ва муштарак кор мекунанд. Ба ғайр аз ин, дар ин ҷо хосияти meta низ мавҷуд аст, ки дар он мо ҳолати дархостро мебинем.

Диққати манро ба чизе дигар ҷалб мекунам, дар шумо метавонад чунин рӯй диҳад, ки pending ва, ба таври зарурӣ, fulfilled ду маротиба намоиш дода шаванд. Агар инҳамон тавр бошад, пас майлус машавед, мо дар бораи ин дертар сухан хоҳем гуфт.

Барномаи худро бо донишҷӯён кушоед. Дар он файли StudentsList.jsx-ро кушоед. Лозимаҳоро ба он ворид кунед ва thunk-ро мувофиқи маводи дарс ворид намоед.

Пас аз омухтани маводи дарс, ҳолати дархости studentStatus-ро гиред, ва сипас, бо истифода аз useEffect, фиристед fetchStudents танҳо ба шарте, ки қимати studentStatus - 'idle' бошад.

Барномаи худро оғоз кунед, дар менюи барнома аз чап рӯй 'Students'-ро клик кунед, ва сипас дар браузер васеъшавии Redux DevTools-ро оғоз кунед, ҳамон тавре ки дар ин дарс шумо бояд экшенҳоро бо pending ва fulfilled (ва дар он payload бо донишҷӯён) бубинед. Дар варақаҳои васеъшавӣ гирд гардед.