Envío de datos usando thunk en Redux

En la lección anterior analizamos el procesamiento de una solicitud POST en nuestro servidor falso. Ahora escribamos una función thunk que enviará la solicitud al servidor.

Abramos nuestra aplicación de productos, y en ella el archivo productsSlice.js. Ahora después del thunk fetchProducts usando createAsyncThunk crearemos el thunk addProduct:

export const addProduct = createAsyncThunk()

Como primer parámetro pasaremos a createAsyncThunk 'products/addProduct', y como segundo un callback asíncrono, que aceptará un objeto con los datos del nuevo producto:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

En el código de este callback llamaremos al cliente, pasándole como parámetros la ruta y el objeto con el producto, y luego devolveremos los datos de la respuesta:

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

Ahora más abajo en el código miremos el campo reducers para productsSlice. Antes añadíamos un nuevo producto usando el reductor productAdded, en el cual teníamos los métodos reducer y prepare. Ahora generamos los datos necesarios en el servidor y trabajamos con thunk, así que eliminemos completamente el reductor productAdded del código. Y luego añadamos en el método extraReducers (al final de su código) otro reductor adicional, que en caso de una solicitud exitosa añadirá en el slice products el nuevo producto directamente desde el payload de la acción (recordemos que tal código es posible solo gracias al increíble createSlice):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

Sí, por cierto, no olviden quitar nanoid de las líneas de importación, y productAdded de la exportación de acciones al final del archivo.

Abra su aplicación de estudiantes. Abra en ella el archivo studentsSlice.js. Usando createAsyncThunk cree otro thunk addStudent, que enviará una solicitud POST al servidor para añadir un nuevo estudiante, como se muestra en la lección.

Luego, más abajo, realice los cambios para studentsSlice: elimine completamente el reductor studentAdded en la propiedad reducers. Y en el campo extraReducers añada un reductor adicional, que añadirá un nuevo estudiante en el slice students desde el payload de la acción en caso de una solicitud exitosa, como se muestra en la lección.