Ajout d'informations sur le vendeur dans Redux

Nous avons parlé du fait que nos produits sont essentiellement ajoutés à l'application par des vendeurs. Allons-y, lors de l'ajout d'un nouveau produit, affichons des informations sur le vendeur.

Ouvrons notre application de produits, et dans celle-ci le fichier productsSlice.js. Allons-y, transmettons à prepare un autre paramètre, appelons-le sellerId et définissons -le ensuite pour le payload de l'action. Maintenant notre morceau de code pour prepare sera comme ceci :

prepare(name, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			name,
			desc,
			price,
			amount,
			seller: sellerId,
		},
	}
},

Maintenant, nous devons apporter une série de modifications au fichier contenant le formulaire pour ajouter un produit NewProductForm.jsx. Pour commencer, ajoutons un autre état local pour l'id du vendeur :

const [sellerId, setSellerId] = useState('')

Ensuite, après la déclaration de la variable dispatch pour useDispatch, ajoutons le code pour obtenir la slice des vendeurs de l'état à l'aide du hook useSelector :

const sellers = useSelector((state) => state.sellers)

Ajoutons un de plus aux gestionnaires de champs de saisie :

const onSellerChanged = (e) => setSellerId(e.target.value)

Ajustons onSaveProductClick en ajoutant pour l'action productAdded également sellerId :

dispatch(productAdded(name, desc, price, amount, sellerId))

Ouvrez votre application d'étudiants. Ajoutez la possibilité de saisir des informations sur l'enseignant qui a ajouté les étudiants. Pour cela, en étudiant le matériel de la leçon, apportez des modifications à la fonction prepare dans le fichier studentsSlice.js.

Apportez les modifications correspondantes dans le fichier NewStudentForm.jsx