Introducción a los thunks en Redux

En el capítulo anterior organizamos el trabajo del servidor, la base de datos y el cliente para intercambiar datos. Ahora necesitamos tender el último puente que ayudará a nuestra aplicación Redux organizada 'sincrónicamente' a interactuar con el cliente asíncrono que creamos en la última lección del capítulo anterior, para enviar solicitudes y recibir los datos necesarios en la respuesta.

Como recordamos de las primeras lecciones de la sección anterior, Redux no sabe nada sobre cómo trabajar con lógica asíncrona y para ello usaremos el middleware thunk. Este middleware permite trabajar con las actions enviadas, usar en el código de nuestro thunk los métodos dispatch y getState del store, y también ayudar al método dispatch a trabajar no solo con objetos JS ordinarios, sino también con entidades como funciones y promesas.

Normalmente la función thunk se llama con dos argumentos dispatch y getState (según sea necesario), que se pueden utilizar en el cuerpo de esta función. Con ella se pueden enviar actions ordinarias. También se puede enviar a través de store.dispatch. Un ejemplo de tal función se muestra a continuación:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Old Color: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`New Color: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Ahora abramos nuestra aplicación de productos. Lo primero que debemos obtener del servidor al iniciar la aplicación es la lista de productos. Como normalmente los thunks se escriben en los archivos de slice, abriremos el archivo productsSlice.js.

La buena noticia es que no necesitamos lidiar con la instalación de Redux Thunk, ya que la función configureStore de RTK ya lo hará por nosotros. Por lo tanto, simplemente agreguemos createAsyncThunk a la importación en el archivo:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Agreguemos también nuestro cliente a la importación:

import { client } from '../../api/client'

Y ahora mediante createAsyncThunk creemos nuestro primer thunk para obtener productos, hagámoslo justo después de declarar el objeto initialState:

export const fetchProducts = createAsyncThunk()

El primer parámetro de createAsyncThunk recibirá una cadena para el tipo de action generado, y el segundo, una función callback para payload, que devolverá como resultado ya sea los datos o una promesa con un error (consulte el archivo client.js). En el código de la función llamamos a client.get y le pasamos la ruta que especificamos en el servidor (consulte los parámetros aceptados por http.get en server.js):

export const fetchProducts = createAsyncThunk(
	'products/fetchProducts',
	async () => {
		const response = await client.get('/fakeServer/products')
		return response.data
	}
)

Abra su aplicación de estudiantes. Abra en ella el archivo studentsSlice.js. Importe en él la función createAsyncThunk para crear thunks, y también client para enviar solicitudes API al servidor.

Inmediatamente después de declarar el objeto initialState, usando createAsyncThunk, cree un thunk fetchStudents para obtener la lista de estudiantes, que enviará una solicitud GET a la dirección /fakeServer/students, especificada en su archivo server.js, y devolverá response.data, como se muestra en los materiales de la lección. Como primer parámetro para createAsyncThunk, especifique la cadena students/fetchStudents para el tipo de action.