Preparación de datos para el objeto action en Redux

Recientemente hablamos sobre que la función createSlice espera un argumento al crear action.payload. Por un lado, esto simplifica su uso, por otro lado, puede requerir movimientos adicionales para preparar el contenido del objeto action.

Abramos nuestra aplicación de productos, y en ella el archivo NewProductForm.jsx. Presta atención a la siguiente línea de código:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Aquí estamos ensamblando el objeto payload directamente en el componente React y pasándolo a la acción productAdded. ¿Y si tenemos que enviar la misma acción desde varios componentes o la lógica para ensamblarlo resulta compleja? En principio, a nuestro componente no le debería importar cómo se ve el objeto en payload para esta acción. Además, no nos satisface la duplicación constante de código.

Nuestro famoso createSlice puede nuevamente ayudarnos a resolver estos problemas, ya que al escribir un reductor, nos permite usar una función callback prepare, en la cual podemos escribir varias lógicas, generar números aleatorios y más. En este caso, el valor para el campo del reductor puede representarse como el siguiente objeto:

{reducer, prepare}

Abramos nuestro archivo productsSlice.js y cambiemos el código para el reductor productAdded. Ahora este fragmento de código:

productAdded(state, action) {
	state.push(action.payload)
},

Lo cambiaremos por el siguiente, en el cual la función reducer se encargará de actualizar el estado en el store, y prepare - de devolver el objeto payload con el id generado y nuestros otros datos:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Ya que ahora generaremos el id aquí, y no en el componente, agreguemos nanoid en la importación:

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

Finalmente, hagamos los cambios en NewProductForm.jsx. En lugar de la línea:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Tendremos esta, en la que simplemente pasaremos a través de comas los datos necesarios (no olvides en este archivo quitar nanoid de la importación):

dispatch(productAdded(name, desc, price, amount))

Ejecutemos la aplicación, luego creemos un nuevo producto y asegurémonos de que no hayamos roto nada.

Abre tu aplicación de estudiantes. En el archivo StudentsSlice.js reescribe tu reductor studentAdded de tal manera que esté en forma de objeto {reducer, prepare}, como se muestra en la lección.

Realiza los cambios correspondientes en el archivo NewStudentForm.jsx, como se muestra en la lección. Ejecuta la aplicación y asegúrate de que todo funcione como antes.