Wysyłanie thunk z komponentu w Redux

Na tej lekcji wyślemy thunk do pobrania produktów z komponentu React ProductsList.

Otwórzmy teraz naszą aplikację z produktami, a w niej plik ProductsList.jsx. Na początek dodajmy do importu thunk fetchProducts, który stworzyliśmy:

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

Będziemy również potrzebować hooka useDispatch do wysłania naszego kreatora akcji oraz hooka useEffect, ponieważ mamy tutaj efekt uboczny, ponieważ mamy do czynienia z siecią, a to jest już zewnętrzne API:

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

Teraz pierwszą linią w kodzie funkcji ProductsList przed deklaracją products dodajmy:

const dispatch = useDispatch()

Następnie przy pobieraniu produktów ze stanu będziemy również wyciągać status żądania:

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

I od razu po tym powiemy Reactowi za pomocą hooka useEffect, że po renderowaniu komponentu konieczne jest pobranie produktów. Tutaj przyda nam się status żądania, ponieważ ważne jest, aby takie żądanie było wysyłane tylko raz:

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

Teraz możemy uruchomić naszą aplikację, kliknąć na 'Products' w menu po lewej stronie. Listy produktów jeszcze nie zobaczymy, ale jeśli wejdziemy do naszego Redux DevTools, to w lewej części okienka pojawią się automatycznie wygenerowane (jak mówiłem na poprzedniej lekcji) akcje products/fetchProducts/pending i fulfilled. Teraz kliknijmy na akcję products/fetchProducts/fulfilled i na jej pole payload - oto nasza lista produktów! Hurra, wszystkie ogniwa w łańcuchu - serwer, baza, klient i aplikacja Redux - działają spójnie i wspólnie. Nawiasem mówiąc, jak widać, jest tu również właściwość meta, w której widzimy status żądania.

Zwróćmy uwagę na jeszcze jedną rzecz, u ciebie może się zdarzyć, że pending i, co za tym idzie, fulfilled będą wyświetlane po dwa razy. Jeśli tak jest, to nie martw się, porozmawiamy o tym później.

Otwórz twoją aplikację ze studentami. Otwórz w niej plik StudentsList.jsx. Zaimportuj do niego niezbędne hooki i thunk zgodnie z materiałem z lekcji.

Po zapoznaniu się z materiałami z lekcji, pobierz status żądania studentStatus, a następnie, używając useEffect, wyślij fetchStudents tylko pod warunkiem, że wartość studentStatus to 'idle'.

Uruchom twoją aplikację, kliknij w menu aplikacji po lewej stronie na 'Students', a następnie uruchom w przeglądarce rozszerzenie Redux DevTools, tak jak na tej lekcji powinieneś zobaczyć akcje z pending i fulfilled (a w nim payload ze studentami). Poeksploruj zakładki rozszerzenia.