Компонентдан Reduxга thunk жўнатиш

Ущ сабакда биз React-компоненти ProductsList дан товарларни олиш учун thunk жўнатамиз.

Келинг энди товарлар билан ишлайдиган илованимизни очайлик, ундаги ProductsList.jsx файлини эса. Бошлаш учун яратилган fetchProducts thunk ни импорт киламиз:

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

Шунингдек, бизга action creator жўнатиш учун useDispatch хуки керак бўлади ва useEffect хуки ham керак, чунки бу ерда бизда йўналтирилган таъсир мавжуд, чунки биз тармоқ билан ишлаяпмиз, бу эса ташқи API hisoblanadi:

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)

Ва шундан сўнг useEffect хуки ёрдамида React га компонент чиққандан кейин товарларни олишимиз кераклигини айтишимиз керак. Бу ерда бизга сўров статуси керак бўлади, чунки биз учун сўров фақат бир марта жўнатилиши мухим:

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

Хозир биз илованимизни ишга туширишимиз, унда чап менюдаги 'Products' ни босишимиз мумкин. Товарлар рўйхатини биз хали кўролмаймиз, лекин агар биз Redux DevTools га кирсак, чап кискача ойнада автоматгина яратилган (мени ўтган сабакда айтганимдек) products/fetchProducts/pending ва fulfilled actionlar пайдо бўлади. Энди action products/fetchProducts/fulfilled унинг payload майдонига босайлик - манa бизнинг товарлар рўйхатимиз! Ҳур, занжиримиздаги барча ҳалқалар - сервер, база, клиент ва Redux - илова биргаликда ва мослашиб ишлаяпти. Айтмоқчи, кориб турганingizdek бу ерда яна meta хусусияти бор, унда биз сўров статусини кўрамиз.

Яна бир нарсага диққат қаратайлик, сизда pending ва, шаңбасти, fulfilled икки марта кўриниши мумкин. Агар бундай бўлса, хафа бўлмангиз, биз бу ҳақда кейинрок гапирамиз.

Талабалар билан ишлайдиган илованингизни очинг. Унданги StudentsList.jsx файлини очаверинг. Унга зарур бўлган хукларни ва thunk ни сабак маводи асосида импорт килинг.

Сабақ маводларини ўрганиб, сўров статусини studentStatus олинг, ва кейин, useEffect дан фойдаланиб, fetchStudents ни фақат studentStatus нинг қиймати - 'idle' бўлгандагина жўнатинг.

Илованингизни ишга туширинг, чап менюдаги 'Students' ни босинг, ва кейин браузерингизда Redux DevTools кенгайтмасини ишга туширинг, ущ сабакдаги каби сиз pending ва fulfilled (унинг ичида payload talabalar bilan) actionlarни кўришингиз керак. Кенгайтманинг варақлари атрофида аралашинг.