Слање thunk-а из компоненте у Redux

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

Хајде сада да отворимо нашу апликацију са производима, а у њој фајл ProductsList.jsx. За почетак ћемо додати у увозу thunk fetchProducts, који смо креирали:

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

Такође ће нам требати hook useDispatch за слање нашег креатора акције (action creator) и hook useEffect јер овде имамо нуспојаву (side effect), пошто имамо посла са мрежом, а то је већ спољни 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)

И одмах после тога ћемо помоћу hook-a useEffect рећи React-у да нам након цртања компоненте потребно је да добијемо производе. Овде ће нам требати статус захтева, јер нам је важно да такав захтев буде послат само једном:

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

Сада можемо покренути нашу апликацију, кликнути у њој на 'Products' у менију са леве стране. Списак производа још нећемо видети, али ако отворимо наш Redux DevTools, тада ће се у левом делу прозора појавити генерисане аутоматски (као што сам рекао на прошлој лекцији) акције products/fetchProducts/pending и fulfilled. Сада да кликнемо на акцију products/fetchProducts/fulfilled и на њено поље payload - ево нашег списка производа! Ура, све наше карике у ланцу - сервер, база, клијент и Redux апликација - раде усклађено и заједно. Иначе, као што видите овде још постоји својство meta, у којем видимо статус захтева.

Обратимо пажњу на још једну ствар, може се десити да се pending и, самим тим, fulfilled буду приказали по два пута. Ако јесте тако, онда не брините, о томе ћемо касније разговарати.

Отворите вашу апликацију са студентима. Отворите у њој фајл StudentsList.jsx. Увезите у њега потребне hook-ове и thunk према материјалу са лекције.

Проучивши материјал са лекције, добијте статус захтева studentStatus, а затим, користећи useEffect, пошаљите fetchStudents само под условом да је вредност studentStatus - 'idle'.

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