Envío de thunk desde un componente en Redux

En esta lección enviaremos un thunk para obtener productos desde el componente React ProductsList.

Ahora abramos nuestra aplicación de productos, y en ella el archivo ProductsList.jsx. Para empezar agreguemos a la importación el thunk fetchProducts, que creamos:

import { selectAllProducts, fetchProducts } from './productsSlice'

También necesitaremos el hook useDispatch para enviar nuestro creador de acción y el hook useEffect porque aquí tenemos un efecto secundario, ya que estamos tratando con la red, y esto ya es una API externa:

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

Ahora, en la primera línea del código de la función ProductsList, antes de la declaración de products, agreguemos:

const dispatch = useDispatch()

A continuación, al obtener los productos del estado también extraeremos el estado de la solicitud:

const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

E inmediatamente después de esto, le diremos a React usando el hook useEffect, que después de renderizar el componente necesitamos obtener los productos. Aquí es donde necesitaremos el estado de la solicitud, porque es importante que dicha solicitud se envíe solo una vez:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

Ahora podemos ejecutar nuestra aplicación, hacer clic en 'Products' en el menú de la izquierda. Todavía no veremos la lista de productos, pero si entramos en nuestras Redux DevTools, en la parte izquierda de la ventana aparecerán las acciones generadas automáticamente (como dije en la lección anterior) products/fetchProducts/pending y fulfilled. Ahora hagamos clic en la acción products/fetchProducts/fulfilled y en su campo payload - ¡ahí está nuestra lista de productos! Hurra, todos nuestros eslabones en la cadena - servidor, base de datos, cliente y la aplicación Redux - funcionan de manera coordinada y conjunta. Por cierto, como ven aquí también hay una propiedad meta, en la que vemos el estado de la solicitud.

Prestemos atención a una cosa más, puede suceder que pending y, en consecuencia, fulfilled se muestren dos veces. Si es así, no se preocupen, hablaremos de esto más adelante.

Abra su aplicación de estudiantes. Abra en ella el archivo StudentsList.jsx. Importe en él los hooks necesarios y el thunk de acuerdo con el material de la lección.

Después de estudiar los materiales de la lección, obtenga el estado de la solicitud studentStatus, y luego, usando useEffect, envíe fetchStudents solo bajo la condición de que el valor de studentStatus sea 'idle'.

Ejecute su aplicación, haga clic en el menú de la aplicación a la izquierda en 'Students', y luego ejecute la extensión Redux DevTools en el navegador, como en esta lección debería ver las acciones con pending y fulfilled (y en ella payload con los estudiantes). Explore las pestañas de la extensión.