Envoi d'un thunk depuis un composant dans Redux

Dans cette leçon, nous enverrons un thunk pour récupérer les produits depuis le composant React ProductsList.

Ouvrons maintenant notre application de produits, et dans celle-ci le fichier ProductsList.jsx. Pour commencer, ajoutons à l'import le thunk fetchProducts que nous avons créé :

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

Nous aurons également besoin du hook useDispatch pour envoyer notre créateur d'action et du hook useEffect parce qu'ici nous avons un effet de bord, puisque nous interagissons avec le réseau, ce qui est déjà une API externe :

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

Maintenant, ajoutons comme première ligne dans le code de la fonction ProductsList, avant la déclaration de products :

const dispatch = useDispatch()

Ensuite, lors de la récupération des produits depuis l'état, nous allons aussi extraire le statut de la requête :

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

Et immédiatement après, disons à React à l'aide du hook useEffect qu'après le rendu du composant nous devons récupérer les produits. Ici le statut de la requête nous sera utile, car il est important qu'une telle requête soit envoyée une seule fois :

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

Maintenant nous pouvons lancer notre application, cliquer sur 'Products' dans le menu de gauche. Nous ne verrons pas encore la liste des produits, mais si nous ouvrons notre Redux DevTools, dans la partie gauche de la fenêtre, nous verrons apparaître les actions générées automatiquement (comme je l'ai dit dans la leçon précédente) products/fetchProducts/pending et fulfilled. Maintenant, cliquons sur l'action products/fetchProducts/fulfilled et sur son champ payload - voici notre liste de produits ! Hourra, tous nos maillons de la chaîne - serveur, base de données, client et application Redux - fonctionnent de manière coordonnée et collective. Au fait, comme vous pouvez le voir, il y a aussi une propriété meta, dans laquelle nous voyons le statut de la requête.

Prêtons attention à une autre chose, il peut vous arriver que pending et, par conséquent, fulfilled s'affichent deux fois. Si c'est le cas, ne vous inquiétez pas, nous en parlerons plus tard.

Ouvrez votre application d'étudiants. Ouvrez-y le fichier StudentsList.jsx. Importez-y les hooks nécessaires et le thunk conformément au contenu de la leçon.

Après avoir étudié les matériels de la leçon, récupérez le statut de la requête studentStatus, puis, en utilisant useEffect, envoyez fetchStudents uniquement si la condition que la valeur de studentStatus est 'idle' est remplie.

Lancez votre application, cliquez dans le menu de l'application à gauche sur 'Students', puis lancez dans le navigateur l'extension Redux DevTools, comme dans cette leçon vous devriez voir les actions avec pending et fulfilled (et dans celle-ci payload avec les étudiants). Parcourez les onglets de l'extension.