Reductores en Redux

En la lección anterior, usando la función createSlice creamos un segmento (slice) para los productos products y un reductor que actualizará este segmento, almacenado en el store. Recuerdo nuevamente, que en Redux los datos del estado se cambian mediante reductores.

Hay que recordar que sobre los reductores se imponen una serie de restricciones. El reductor actualiza el estado solo en base a los valores recibidos del estado actual y del objeto action, y luego decide cómo cambiar el estado y devuelve su nuevo valor.

Sabemos que, por defecto, los objetos y arrays en JavaScript son mutables. También sabemos que no se puede cambiar el state directamente, en tal caso hay que trabajar solo con copias. El reductor también debe obedecer esta regla. Pero escribir esta lógica manualmente puede ser una tarea bastante tediosa y compleja, y aquí viene al rescate la función createSlice, que utiliza la biblioteca Immer, transformando tu código 'mutable' en 'inmutable'. Así, pecar y simplificar la vida solo se permite al usar las funciones createSlice o createReducer.

Entre las restricciones del reductor también está el uso de lógica asíncrona, el cálculo de valores aleatorios y la ejecución de otros "efectos secundarios". Y ahora, habiéndonos familiarizado más con el reductor, volvamos a nuestra aplicación de productos.

En nuestra aplicación tenemos un store, que creamos en lecciones anteriores, pero por ahora no hay nada en él. Abramos nuestro archivo store.js y agreguemos un poco de código. Para empezar, importemos en él la función reducer para productos:

Ahora, como reductor, podemos especificar la función importada productsReducer:

Con la línea anterior le decimos a nuestro store, que ahora cuando ocurra una action todos los datos para el segmento state.products serán actualizados por el reductor productsReducer.

Ahora puedes ejecutar la aplicación (¡observa que ha desaparecido la advertencia en la consola sobre un reductor no válido!), abrir Redux DevTools en el navegador y explorar sus pestañas. Por ejemplo, al hacer clic en la pestaña State dentro de la pestaña Inspector podemos ver nuestros dos objetos con productos, que se mostraron como valor inicial del estado al iniciar la aplicación por primera vez. En la pestaña Log monitor vemos qué segmentos tiene el estado global - este es el segmento products, que incluye dos objetos. También echa un vistazo a la pestaña Chart.