Αποστολή thunk από το component στο Redux

Σε αυτό το μάθημα θα στείλουμε ένα thunk για την ανάκτηση προϊόντων από το React-component 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)

Και αμέσως μετά θα πούμε στο React με τη βοήθεια του hook useEffect, ότι μετά την απόδοση του component πρέπει να ανακτήσουμε τα προϊόντα. Εδώ θα χρειαστούμε την κατάσταση του αιτήματος, αφού είναι σημαντικό ένα τέτοιο αίτημα να αποστέλλεται μόνο μία φορά:

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

Τώρα μπορούμε να εκκινήσουμε την εφαρμογή μας, να κλικάρουμε στο 'Products' στο αριστερό μενού. Δεν θα δούμε ακόμα τη λίστα προϊόντων, αλλά αν πάμε στα Redux DevTools, στο αριστερό μέρος του παραθύρου θα εμφανιστούν οι αυτόματα παραγόμενοι (όπως είπα στο προηγούμενο μάθημα) actions products/fetchProducts/pending και fulfilled. Τώρα ας κλικάρουμε στο action products/fetchProducts/fulfilled και στο πεδίο του payload - να η λίστα μας με τα προϊόντα! Ζήτω, όλοι οι κρίκοι της αλυσίδας μας - ο server, η βάση δεδομένων, ο client και η εφαρμογή Redux - λειτουργούν αρμονικά και συλλογικά. Παρεμπιπτόντως, όπως βλέπετε εδώ υπάρχει και η ιδιότητα meta, στην οποία βλέπουμε την κατάσταση του αιτήματος.

Ας δώσουμε προσοχή σε ένα ακόμα πράγμα, μπορεί να σας συμβεί το pending και, κατά συνέπεια, το fulfilled να εμφανίζονται δύο φορές. Αν συμβαίνει αυτό, μην απελπίζεστε, θα μιλήσουμε γι' αυτό αργότερα.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Ανοίξτε σε αυτή το αρχείο StudentsList.jsx. Εισαγάγετε σε αυτό τα απαραίτητα hooks και το thunk σύμφωνα με το υλικό από το μάθημα.

Μελετώντας το υλικό του μαθήματος, ανακτήστε την κατάσταση του αιτήματος studentStatus, και στη συνέχεια, χρησιμοποιώντας το useEffect, στείλτε το fetchStudents μόνο υπό την προϋπόθεση ότι η τιμή του studentStatus είναι 'idle'.

Εκκινήστε την εφαρμογή σας, κλικάρετε στο μενού της εφαρμογής αριστερά στο 'Students', και στη συνέχεια εκκινήστε στο πρόγραμμα πλοήγησης την επέκταση Redux DevTools, όπως και σε αυτό το μάθημα πρέπει να δείτε actions με pending και fulfilled (και σε αυτό το payload με τους μαθητές). Εξερευνήστε τις καρτέλες της επέκτασης.