Kutuma Thunk Kutoka Kwenye Sehemu ya Mtumiaji Hadı Redux

Katika somo hili tutatumia thunk kutoka kwenye sehemu ya mtumiaji ya React ProductsList ili kupata bidhaa.

Sasa tufungue programu yetu ya bidhaa, na ndani yake faili ProductsList.jsx. Kwanza tuongeze thunk fetchProducts ambayo tumeunda kwenye usajili:

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

Pia tutahitaji kutumia kuingiza useDispatch ili kutuma kinjili yetu cha utengenezaji wa hatua na kuingiza useEffect kwa sababu hapa tuna athari ya upande, kwa kuwa tunashughulika na mtandao, na hii ni API ya nje:

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

Sasa mstari wa kwanza katika msimbo wa kazi ProductsList kabla ya tangazo la products tuongeze:

const dispatch = useDispatch()

Ifuatayo wakati wa kupata bidhaa kutoka kwenye hali tutachukua pia hali ya ombi:

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

Na mara moja baada ya hii tumeambia React kwa kutumia kuingiza useEffect, kwamba baada ya kuona kijenzi tunahitaji kupata bidhaa. Hapa tutahitaji hali ya ombi, kwa sababu inatuambia ombi litumwe mara moja tu:

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

Sasa tunaweza kuanzisha programu yetu, bonyeza kwenye 'Products' kwenye menyu ya kushoto. Bado hatutaona orodha ya bidhaa, lakini kama tutaingia kwenye Redux DevTools yetu, basi upande wa kushoto kwa dirisha letu zitaonekana hatua zilizotengenezwa moja kwa moja (kama nilivyosema katika somo lililopita) products/fetchProducts/pending na fulfilled. Sasa tubonyeze kwenye hatua products/fetchProducts/fulfilled na uga wake payload - hapa ndio orodha yetu ya bidhaa! Hongera, sehemu zetu zote katika mnyororo - seva, hifadhi data, mteja na programu ya Redux - zinafanya kazi kwa umoja na pamoja. Kwa njia, kama unavyoona hapa kuna sifa meta, ambayo tunaona hali ya ombi.

Tuzingatie jambo lingine, inaweza kutokea kwako kwamba pending na, kwa hiyo, fulfilled zitaonyeshwa mara mbili. Ikiwa ni hivyo, usihuzunike, tutazungumzia hili baadaye.

Fungua programu yako ya wanafunzi. Fungua ndani yake faili StudentsList.jsx. Usajilishe ndani yake viingizio muhimu na thunk kulingana na nyenzo kutoka kwenye somo.

Baada ya kusoma nyenzo za somo, pata hali ya ombi studentStatus, na kisha, kwa kutumia useEffect, tuma fetchStudents tu kwa sharti kwamba thamani ya studentStatus ni 'idle'.

Anzisha programu yako, bonyeza kwenye menyu ya programu kushoto kwenye 'Students', kisha anzisha kwenye kivinjari kiongezo cha Redux DevTools, kama ilivyo kwenye somo hili unapaswa kuona hatua za pending na fulfilled (na ndani yake payload na wanafunzi). Pitia kwenye vilango vya kiongezo.