Изпращане на thunk от компонент в Redux

В този урок ще изпратим thunk за получаване на продукти от React-компонента ProductsList.

Нека сега отворим нашето приложение с продукти, а в него файла ProductsList.jsx. Като начало ще добавим към импорта thunk fetchProducts, който създадохме:

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

Също така ще ни е необходим хук useDispatch за изпращане на нашия action creator и хук useEffect, защото тук имаме страничен ефект, тъй като работим с мрежа, а това е външен API:

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

Сега първият ред в кода на функцията ProductsList преди декларацията на products ще добавим:

const dispatch = useDispatch()

След това при получаване на продукти от състоянието ще извлечем и статуса на заявката:

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

И веднага след това казваме на React с помощта на хука useEffect, че след рендиране на компонента трябва да получим продуктите. Тук ни е необходим и статусът на заявката, защото е важно такава заявка да се изпраща само веднъж:

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

Сега можем да стартираме нашето приложение, да кликнем върху 'Products' в менюто отляво. Няма да видим списъка с продукти все още, но ако влезем в нашия Redux DevTools, то в лявата част на прозореца ще се появят автоматично генерирани (както казах в предишния урок) екшъни products/fetchProducts/pending и fulfilled. Сега нека кликнем върху action products/fetchProducts/fulfilled и върху неговото поле payload - ето го нашия списък с продукти! Ура, всички наши връзки във веригата - сървър, база данни, клиент и Redux - приложението работят съгласувано и заедно. Между другото, както виждате тук има и свойство meta, в което виждаме статуса на заявката.

Нека обърнем внимание на още нещо, при вас може да се случи така, че pending и, следователно, fulfilled ще се показват по два пъти. Ако това е така, не се притеснявайте, ще говорим за това по-късно.

Отворете вашето приложение със студенти. Отворете в него файла StudentsList.jsx. Импортирайте в него необходимите хукове и thunk според материала от урока.

След като изучихте материала от урока, получете статуса на заявката studentStatus, а след това, използвайки useEffect, изпратете fetchStudents само при условие, че стойността на studentStatus е 'idle'.

Стартирайте вашето приложение, кликнете в менюто на приложението отляво върху 'Students', а след това стартирайте в браузъра разширението Redux DevTools, както в този урок трябва да видите екшъни с pending и fulfilled (а в него payload със студенти). Разгледайте разделите на разширението.