Reducer y action en Redux

En la lección anterior terminamos el formulario para agregar producto y lo mostramos en la página principal. Pero por ahora los datos agregados no se guardan, en otras palabras el nuevo producto no se añade a los existentes en el store. Arreglemos esto.

Para empezar en nuestra aplicación de productos abriremos el archivo productsSlice.jsx y escribiremos en la propiedad reducer para createSlice la función productAdded, que se encargará de agregar el producto al store basándose en el estado actual y la acción que se le pasen. Cabe señalar que aquí no se nos pasa todo el state, sino solo la parte que corresponde a los productos (el slice products solo conoce sobre ella). El objeto con el nuevo producto estará en la propiedad payload del objeto action, que será generado por el manejador al hacer clic en el botón de guardar en el formulario. Como resultado el reducer productAdded se verá en el código de createSlice así:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

¿Y qué hay del action? Al principio del tutorial mencionamos que un action es un evento cualquiera, representado como un objeto, que describe lo que ocurrió en la aplicación. También hablamos so que se puede usar una función action creator, que nos creará dicho objeto, por ejemplo así:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

La buena noticia es que no necesitamos hacer nada, ya que la función createSlice lo hará por nosotros. Una vez que escribimos el reducer, ella automáticamente creará por nosotros el action creator con el mismo nombre. Solo nos queda exportar el action creator obtenido para su posterior uso en los componentes. Hagamos esto al final del archivo antes de exportar el reducer, así:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Abra su aplicación de estudiantes, y luego el archivo studentsSlice.jsx, complete el valor del campo reducer para createSlice, como se muestra en la lección.

Agregue al final del archivo studentsSlice.jsx la exportación de la función action creator obtenida.