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-ը ուսանողներով): Թափահարեք ընդլայնման ներդիրները: