Envoi d'action et hook useDispatch dans Redux

Nous avons mis en place presque tous les éléments pour le fonctionnement d'une application Redux. Il ne reste plus qu'à comprendre comment envoyer une action depuis un composant React. Commençons.

Ouvrez notre application avec les produits. Dans le formulaire du composant NewProductForm, nous avons un bouton pour sauvegarder les données du nouveau produit. Ajoutons-lui un gestionnaire de clic. Lorsqu'on clique dessus, le gestionnaire onSaveProductClick doit s'exécuter :

<button type="button" onClick={onSaveProductClick}>
	save
</button>

Pour créer un nouveau produit, nous aurons besoin d'un nouvel id. Nous allons le générer à l'aide de la bibliothèque bien connue nanoid. D'ailleurs, il n'est pas nécessaire de l'installer, car elle est déjà incluse avec le package RTK. Ajoutons nanoid dans l'import :

import { nanoid } from '@reduxjs/toolkit'

Nous nous souvenons également que la seule façon de modifier le state - est d'appeler la méthode dispatch, qui est disponible sur le store et de lui passer un objet action. Pour accéder à cette méthode, nous utiliserons le hook React-Redux useDispatch. Importons-le :

import { useDispatch } from 'react-redux'

Dans le code de la fonction NewProductForm, créons une constante dispatch pour lui immédiatement après avoir créé les constantes pour nos states locaux :

const dispatch = useDispatch()

Nous devons également importer le creator d'action productAdded, que nous avons obtenu dans la leçon précédente :

import { productAdded } from './productsSlice'

Maintenant nous pouvons écrire la fonction du gestionnaire onSaveProductClick. Faisons-le avant la commande return :

const onSaveProductClick = () => {}

À l'intérieur de la fonction, nous appelons dispatch, formons l'objet action, dans la propriété payload duquel nous mettrons l'id généré, le nom, la description, le prix et la quantité du produit. Nous prenons toutes ces données depuis les states locaux. En même temps, au début, nous vérifions dans une condition si tous les champs sont remplis - seulement dans ce cas nous appelons dispatch. À la fin du code de la fonction, nous remettons les states locaux dans leur état initial :

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

Maintenant lançons notre application, saisissons les données dans les champs du formulaire et cliquons sur le bouton de sauvegarde. Hourra, un nouveau produit est apparu en bas de la page. En ouvrant Redux DevTools, et dans celui-ci l'onglet Inspector, nous voyons qu'à gauche en plus de @@INIT, notre action products/productAdded est apparue. Et dans la partie droite nous pouvons cliquer sur les onglets Action et State, en basculant entre @@INIT et products/productAdded. Maintenant nous voyons que notre nouveau produit est ajouté. Également, dans l'onglet Action nous voyons l'action, générée automatiquement avec createSlice (cliquez, par exemple, sur Raw). Hourra : nous n'avons pas eu à l'écrire manuellement.

Ouvrez votre application avec les étudiants, puis le fichier NewStudentForm.jsx, attachez au bouton de sauvegarde un gestionnaire de clic.

Écrivez tous les imports nécessaires et écrivez la fonction gestionnaire onSaveStudentClick, en utilisant la méthode dispatch comme montré dans la leçon.

Lancez l'application, entrez des données dans les champs du formulaire et cliquez sur le bouton de sauvegarde. Assurez-vous qu'un nouvel étudiant a été ajouté en bas de la page.

Ouvrez Redux DevTools et parcourez les onglets Action et State, assurez-vous que le nouvel objet étudiant est ajouté. Regardez l'objet action qui a été généré pour vous, envoyez-le en réponse à cette tâche.