Испраќање на thunk од компонента во Redux

На овој урок ќе испратиме thunk за добивање на производи од React-компонентата ProductsList.

Ајде сега да ја отвориме нашата апликација со производи, а во неа датотеката ProductsList.jsx. За почеток да го додадеме на импортот thunk-от fetchProducts, кој го создадовме:

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

Исто така ќе ни треба hook-от useDispatch за испраќање на нашиот креатор на акции и hook-от useEffect бидејќи овде имаме спореден ефект, бидејќи имаме работа со мрежа, а тоа е веќе надворешно API:

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

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

const dispatch = useDispatch()

Понатаму при добивањето на производи од state-от ние уште ќе го извлечеме и статусот на барањето:

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

И веднаш по ова ќе му кажеме на React со помош на hook-от 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. Импортирујте во неа потребните hooks и thunk според материјалот од урокот.

Проучувајќи го материјалот од урокот, добијте го статусот на барањето studentStatus, а потоа, користејќи useEffect, испратете fetchStudents само доколку вредноста studentStatus е 'idle'.

Стартувајте ја вашата апликација, кликнете во менито на апликацијата лево на 'Students', а потоа стартувајте го во прелистувачот додатокот Redux DevTools, како и во овој урок треба да ги видите акциите со pending и fulfilled (а во него payload со студенти). Разгледајте ги јазичињата на додатокот.