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 :

products/productsSlice.jsprepare(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 :

products/NewProductForm.jsxconst [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 :

products/NewProductForm.jsxconst sellers = useSelector((state) => state.sellers)

Ajoutons un de plus aux gestionnaires de champs de saisie :

products/NewProductForm.jsxconst onSellerChanged = (e) => setSellerId(e.target.value)

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

products/NewProductForm.jsxdispatch(productAdded(name, desc, price, amount, sellerId))