Adición de un reductor a una aplicación Redux

En la lección anterior, creamos el componente UserReaction para que cada producto también tuviera reacciones de usuarios. Ahora necesitamos escribir un reductor que maneje el contador de reacciones cuando un usuario haga clic en el botón de una u otra reacción.

Abramos nuestra aplicación de productos, y en ella el archivo productsSlice.js con todos los reductores. Ahora en la propiedad reducers creemos otro reductor reactionClicked (podemos colocarlo primero - antes de productAdded, aunque no importa). Como es habitual, pasémosle como parámetros state y action:

reactionClicked(state, action) {},

Y ahora dentro de las llaves, que dejamos vacías en el paso anterior, escribamos el código para él. Primero, extraigamos la id del producto del payload del objeto action y el nombre de la reacción:

const { productId, reaction } = action.payload

Luego, del estado pasado, obtengamos el producto necesario:

const currentProduct = state.find(product => product.id === productId)

Y si existe tal producto, incrementemos el valor de la reacción pasada en 1:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Eso es todo, nuestro código para reactionClicked está listo:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Al final del archivo, agreguemos la exportación del creador de acción resultante:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Aquí es necesario señalar dos puntos importantes. Como recordarás de lecciones anteriores - actualizar directamente el valor en el código del reductor así no está permitido (mira esta línea: reactions[reaction]++), pero nos saldremos con la nuestra porque lo hacemos dentro de createSlice, que utiliza la biblioteca Immer. Ella se encargará de convertir nuestro código en una actualización "segura" del valor. Esto nos permite escribir cosas complejas de una manera más simple.

Lo siguiente que hay que recordar - el objeto action debe contener la mínima cantidad posible de información - solo la necesaria para indicar qué sucedió. No se deben hacer en él ningún tipo de cálculos. Todos los cálculos para actualizar el estado deben hacerse en el reductor, aquí se puede escribir toda la lógica necesaria para ello.

Abre tu aplicación de estudiantes y en el archivo studentsSlice.js agrega otro reductor voteClicked en el campo reducers, como se muestra en la lección. Escribe el código para él. La tarea de tu reductor - al hacer clic, incrementar el valor de vote (o voto), en el que se hizo clic, para el estudiante dado, en 1.

Al final del archivo, no olvides exportar el creador de acción resultante voteClicked.