Mostrar los resultados del trabajo de un thunk en un componente en Redux

En la lección anterior, enviamos una solicitud POST usando el thunk addProduct. Ahora vamos a mostrar los resultados de su trabajo en el componente.

Abramos nuestra aplicación de productos, y en ella el archivo NewProductForm.jsx, ya que este componente es responsable de agregar un nuevo producto. Miremos las líneas de importación. Reemplacemos la importación de la acción productAdded, por la importación del thunk addProduct:

import { addProduct } from './productsSlice'

Ahora, dado que no estamos rastreando en el slice el estado 'pending' de la solicitud, hagamos que el usuario pueda hacer clic en el botón de guardar producto solo una vez, ya que no queremos las mismas solicitudes repetidas. Para esto, crearemos otro estado local:

const [requestStatus, setRequestStatus] = useState('idle')

Luego, después de los manejadores y antes de la función onSaveProductClick escribamos código donde verifiquemos si todos los campos del formulario están completos y si el estado de la solicitud está en 'idle':

const canBeSaved =
	[name, desc, price, amount, sellerId].every(Boolean) &&
	requestStatus === 'idle'

Luego cambiaremos el código para onSaveProductClick. En primer lugar, será una función asíncrona y se ejecutará si la condición anterior es verdadera:

const onSaveProductClick = async () => {
	if (canBeSaved) {}
}

A pesar de que no rastreamos en el slice el estado 'rejected', igual podemos mostrar en la consola el error, para esto usaremos la estructura try-catch. También agregaremos un finally, para que después de ejecutar la solicitud establezcamos nuevamente el estado local en 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('error al guardar el producto: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Ya hemos tratado los bloques catch y finally, escribamos el código para el bloque try. Aquí estableceremos el estado local en 'in pogress', hasta que recibamos alguna respuesta como resultado del trabajo del thunk, luego enviaremos nuestro thunk addProduct. Usar la estructura try-catch dependiendo del tipo de respuesta nos ayudará la función de RTK unwrap, que añade a la promesa devuelta. Luego, si la solicitud fue exitosa, establecemos los estados locales a sus estados iniciales. El código completo para onSaveProductClick se verá así:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
			setRequestStatus('in progress')
			await dispatch(
				addProduct({ name, desc, price, amount, seller: sellerId })).unwrap()
			setName('')
			setDesc('')
			setPrice(0)
			setAmount(0)
			setSellerId('')
		} catch (err) {
			console.error('error al guardar el producto: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Ejecutemos nuestra aplicación e intentemos agregar un nuevo producto. Como puedes ver, en caso de una solicitud exitosa los campos se limpian y el nuevo producto se agrega a la lista de productos. También revisa en el navegador las Redux DevTools y navega por sus pestañas, mira las acciones y cómo cambia tu estado.

Abre tu aplicación de estudiantes. Abre en ella el archivo NewStudentForm.jsx. Agrega otro estado local requestStatus, y establécelo inicialmente en 'idle'. Después de revisar los materiales de la lección, crea la variable canBeSaved, con la cual el botón de guardar los nuevos datos del estudiante funcionará/no funcionará, dependiendo del valor de requestStatus y de si los campos están completos.

Escribe el código asíncrono para onSaveStudentClick, que cambiará el valor de requestStatus según la situación, enviará el thunk addProduct con los datos del nuevo estudiante, limpiará los campos en caso de una solicitud exitosa y mostrará en la consola el error en caso de fallo, como se muestra en la lección. Usa para esto la estructura try-catch y la función de RTK unwrap.

Ejecuta tu aplicación, agrega un nuevo estudiante y asegúrate de que todo funcione.