Añadir información del vendedor en Redux

Hemos hablado sobre el hecho de que nuestros productos son añadidos a la aplicación por los vendedores. Vamos a mostrar la información del vendedor al añadir un nuevo producto.

Abrimos nuestra aplicación de productos, y en ella el archivo productsSlice.js. Vamos a pasar a prepare un parámetro más, lo llamaremos sellerId y lo establecemos en el payload de la acción. Ahora nuestro fragmento de código para prepare será así:

products/productsSlice.jsprepare(name, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      name,
      desc,
      price,
      amount,
      seller: sellerId,
    },
  }
},

Ahora necesitamos hacer una serie de cambios en el archivo del formulario para añadir productos NewProductForm.jsx. Primero añadamos otro estado local para el id del vendedor:

products/NewProductForm.jsxconst [sellerId, setSellerId] = useState('')

Luego, después de declarar la variable dispatch para useDispatch, añadamos el código para obtener el slice de vendedores del estado usando el hook useSelector:

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

En los manejadores para los campos de entrada, añadamos uno más:

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

Ajustemos onSaveProductClick, añadiendo sellerId a la acción productAdded:

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