Thunk-ի ուղարկումը բաղադրիչից Redux

Այս դասին մենք կուղարկենք thunk արտադրանքները ստանալու համար React-ի ProductsList բաղադրիչից:

Եկեք այժմ բացենք մեր արտադրանքների հավելվածը, իսկ դրա մեջ՝ ProductsList.jsx ֆայլը: Սկզբում ավելացնենք իմպորտին thunk fetchProducts-ը, որը մենք ստեղծեցինք.

products/ProductsList.jsximport { selectAllProducts, fetchProducts } from './productsSlice'

Մեզ նաև կպահանջվի useDispatch հուքը մեր action creator-ը ուղարկելու համար և useEffect հուքը, քանի որ այստեղ մենք ունենք կողմնակի էֆեկտ, քանի որ մենք գործ ունենք ցանցի հետ, իսկ դա արդեն արտաքին API է.

products/ProductsList.jsximport { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

Այժմ ֆունկցիայի կոդի առաջին տողում ProductsList-ից առաջ products հայտարարությունից ավելացնենք.

products/ProductsList.jsxconst dispatch = useDispatch()

Հաջորդը, ստատից արտադրանքները ստանալիս մենք նաև կվերցնենք հարցման կարգավիճակը.

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

Եվ անմիջապես դրանից հետո կասենք React-ին useEffect հուքի միջոցով, որ բաղադրիչի 렌더링ից հետո մեզ անհրաժեշտ է ստանալ արտադրանքները: Այստեղ մեզ և կպահանջվի հարցման կարգավիճակը, քանի որ մեզ համար կարևոր է, որ նման հարցում ուղարկվի միայն մեկ անգամ.

products/ProductsList.jsxuseEffect(() => {
  if (productStatus === 'idle') {
    dispatch(fetchProducts())
  }
}, [productStatus, dispatch])

Այժմ մենք կարող ենք գործարկել մեր հավելվածը, կտտացնել դրա մեջ ձախ մենյույի 'Products'-ի վրա: Արտադրանքների ցուցակը մենք դեռ չենք տեսնի, բայց եթե մենք մտնենք մեր Redux DevTools, ապա ձախ մասի պատուհանում մեզ կերևան ավտոմատ կերպով ստեղծված (ինչպես ես ասեցի նախորդ դասին) էքշնները products/fetchProducts/pending և fulfilled: Այժմ եկեք կտտացնենք products/fetchProducts/fulfilled էքշնի վրա և նրա payload դաշտի վրա - ահա մեր արտադրանքների փոքր ցուցակը: Ուռա, մեր շղթայի բոլոր օղակները - սերվեր, բազա, կլիենտ և Redux - հավելվածը աշխատում են համաձայնեցված և միասին: Ի դեպ, ինչպես տեսնում եք, այստեղ կա նաև meta հատկությունը, որտեղ մենք տեսնում ենք հարցման կարգավիճակը:

Ուշադրություն դարձնենք ևս մի բանի, ձեզ կարող է պատահել, որ pending և, հետևաբար, fulfilled կցուցադրվեն երկու անգամ: Եթե դա այդպես է, ապա մի տխրեք, մենք այս մասին կխոսենք ավելի ուշ: