Envío de action y hook useDispatch en Redux

Hemos implementado casi todos los componentes para el funcionamiento de una aplicación Redux. Solo queda entender el envío de action desde un componente React. Comencemos.

Abra nuestra aplicación de productos. En el formulario del componente NewProductForm tenemos un botón para guardar los datos del nuevo producto. Añadámosle un controlador de clic. Que al hacer clic en él se active el controlador onSaveProductClick:

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

Al crear un nuevo producto, necesitaremos un nuevo id para él. Lo generaremos utilizando la conocida biblioteca nanoid. Por cierto, no es necesario instalarla, ya que viene incluida en el paquete RTK. Añadamos nanoid en la importación:

import { nanoid } from '@reduxjs/toolkit'

También recordamos que la única forma de cambiar el state es llamar al método dispatch, que tiene el store, y pasarle el objeto action. Para acceder a este método, aplicaremos el hook de React-Redux useDispatch. Importémoslo también:

import { useDispatch } from 'react-redux'

En el código de la función NewProductForm creemos una constante dispatch justo después de haber creado las constantes para nuestros estados locales:

const dispatch = useDispatch()

También necesitamos importar el action creator productAdded, que obtuvimos en la lección anterior:

import { productAdded } from './productsSlice'

Ahora podemos escribir la función controladora onSaveProductClick. Hagámoslo antes del comando return:

const onSaveProductClick = () => {}

Dentro de la función llamamos a dispatch, formamos el objeto action, en la propiedad payload irán el id generado, el nombre, la descripción, el precio y la cantidad del producto. Tomamos todos estos datos de los estados locales. Al mismo tiempo, al principio verificamos en una condición si todos los campos están completos - solo en este caso llamamos a dispatch. Al final del código de la función devolvemos los estados locales a su estado original:

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

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

Ahora ejecutemos nuestra aplicación, ingresemos datos en los campos del formulario y presionemos el botón de guardar. ¡Hurra! Apareció un nuevo producto en la parte inferior de la página. Al abrir Redux DevTools, y en él la pestaña Inspector, vemos que a la izquierda además de @@INIT apareció nuestro action products/productAdded. Y en la parte derecha podemos hacer clic en las pestañas Action y State, alternando entre @@INIT y products/productAdded. Ahora vemos que nuestro nuevo producto se agrega. También en la pestaña Action vemos el action, generado automáticamente con createSlice (haga clic, por ejemplo, en Raw). Hurra: no tuvimos que escribirlo manualmente.

Abra su aplicación de estudiantes, y luego el archivo NewStudentForm.jsx, asigne al botón de guardar un controlador de clic.

Escriba todas las importaciones necesarias y escriba la función controladora onSaveStudentClick, aplicando el método dispatch como se muestra en la lección.

Ejecute la aplicación, ingrese datos en los campos del formulario y haga clic en el botón de guardar. Asegúrese de que se haya agregado un nuevo estudiante en la parte inferior de la página.

Abra Redux DevTools y revise las pestañas Action y State, asegúrese de que se agregue el nuevo objeto del estudiante. Observe el objeto action que se generó, envíelo en la respuesta a esta tarea.