Redux-daky komponentden thunk ibermek

Bu sapakda biz React-komponenti ProductsList-den önümleri almak üçin thunk ibereris.

Indi önümler bilen programmamyzy açalyň, we onuň içinde ProductsList.jsx faýly. Başlangyç üçin, döreden thunkymyz fetchProducts importyna goşalyň:

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

Şeýle hem, action creatorymyzy ibermek üçin useDispatch garmanyna we useEffect garmanyna, sebäbi bu ýerde bizde goşmaça täsir bar, çünki biz tor bilen işleýäris, bu bolsa daşarky API:

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

Indi ProductsList funksiýasynyň kodunyň birinji setirinde, products yglan edilmezden öň, goşalyň:

const dispatch = useDispatch()

Soňra, ýagdaýdan önümleri alanyňyzda, biz sorag ýagdaýyny hem alyp bileris:

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

We şol ýerde, useEffect garmany ýardamy bilen React-a, komponent çyzylanyndan soň önümleri almalydygymyzy aýdalyň. Bu ýerde bizä sorag ýagdaýy gerek, sebäbi şeýle sorag diňe bir geze iberilmeli:

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

Indi programmamyzy işledip bileris, onda çepdäki menyuda 'Products' basyň. Önümleriň sanawy hâli ýok görünmez, ýöne Redux DevTools-a girenimizde, penjireniň çep tarapynda awtomatiki döredilen (öňki sapakda aýdyp geçişim ýaly) hereketler products/fetchProducts/pending we fulfilled peýda bolar. Indi products/fetchProducts/fulfilled hereketine we onuň payload meýdanyna basalyň - bu bolsa önümleriň sanawymyz! Oý, ähli zynjyr böleklerimiz - serwer, düwün, müşderi we Redux - programma ylalaşykly we bilelikde işleýär. Bu ýerde meta hakynda, onda sorag ýagdaýyny görýän ýerimiz bar.

Başga bir zada üns beriň, sizde pending we, şonuň üçin, fulfilled iki geze görünüp bilýär. Eger şeýle bolsa, gyzgalanmaň, biz bu barada soňra gürleşeris.

Talyplyr bilen programmanyzy açyň. Onyň içinde StudentsList.jsx faýlyny açyň. Sapak materyalyna laýyklykda, ona gerekli garmany we thunk-y import ediň.

Sapak materyallaryny öwrenip, sorag ýagdaýyny studentStatus alyň, soňra useEffect ulanyp, diňe studentStatus bahasy 'idle' bolanda fetchStudents iberiň.

Programmanyzy işlediň, programmanyň çepdäki mundasynda 'Students' basyň, soňra brauzerde Redux DevTools giňeldimäni işlediň, bu sapakdaky ýaly sizde pending we fulfilled hereketleri (we onda talyplar bilen payload) görünmeli. Giňeldimäniň ýapgytlaryny gözden geçiriň.