Bileşenden Redux'a thunk gönderme

Bu derde, React bileşeni ProductsList'den ürünleri getirmek için bir thunk göndereceğiz.

Şimdi ürün uygulamamızı açalım ve içindeki ProductsList.jsx dosyasını açalım. Başlangıç olarak, oluşturduğumuz fetchProducts thunk'ını içe aktaralım:

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

Ayrıca, action creator'ımızı göndermek için useDispatch kancasına ve yan etki ile uğraştığımız için useEffect kancasına ihtiyacımız olacak, çünkü ağ ile iletişim harici bir API'dır:

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

Şimdi, ProductsList fonksiyonunun kodunda, products tanımından önceki ilk satıra şunu ekleyelim:

const dispatch = useDispatch()

Daha sonra, state'den ürünleri alırken istek durumunu da alacağız:

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

Ve hemen ardından, useEffect kancasını kullanarak React'e, bileşen render edildikten sonra ürünleri getirmemiz gerektiğini söyleyeceğiz. Burada istek durumu bize gerekli olacak, çünkü böyle bir isteğin yalnızca bir kez gönderilmesi önemli:

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

Şimdi uygulamamızı başlatabiliriz, sol menüdeki 'Products''a tıklayabiliriz. Ürün listesini henüz göremeyeceğiz, ancak Redux DevTools'a girersek, pencerenin sol tarafında otomatik olarak oluşturulmuş (bir önceki derste söylediğim gibi) eylemler products/fetchProducts/pending ve fulfilled görünecek. Şimdi products/fetchProducts/fulfilled action'una ve onun payload alanına tıklayalım - işte ürün listemiz! Yaşasın, zincirimizdeki tüm halkalar - sunucu, veritabanı, istemci ve Redux uygulaması - uyumlu ve birlikte çalışıyor. Bu arada, burada ayrıca istek durumunu gördüğümüz meta özelliği de var.

Başka bir şeye daha dikkat edelim, sizde pending ve dolayısıyla fulfilled iki kez görüntülenebilir. Eğer öyleyse, üzülmeyin, bunun hakkında daha sonra konuşacağız.

Öğrenci uygulamanızı açın. İçindeki StudentsList.jsx dosyasını açın. Dersin materyaline göre gerekli kancaları ve thunk'ı içe aktarın.

Dersin materyalini inceleyerek, studentStatus istek durumunu alın ve ardından, useEffect kullanarak, yalnızca studentStatus değeri 'idle' olduğunda fetchStudents'i gönderin.

Uygulamanızı başlatın, sol menüden 'Students''a tıklayın, ardından tarayıcıda Redux DevTools eklentisini başlatın, bu derste olduğu gibi pending ve fulfilled (ve içinde öğrencilerle birlikte payload) eylemlerini görmelisiniz. Eklentinin sekmelerinde gezinin.