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 სტუდენტებით). დაათვალიერეთ გაფართოების ჩანართები.