Discusión del funcionamiento de una aplicación Redux

En lecciones anteriores, implementamos todos los componentes necesarios para el funcionamiento de una aplicación Redux. Resumamos y repasemos brevemente las etapas principales del funcionamiento de nuestra aplicación con productos.

Al iniciarse por primera vez, nuestra aplicación obtiene de la store una lista de dos productos utilizando useSelector y los muestra en pantalla. En la pantalla también se muestra un formulario donde podemos ingresar los datos de un nuevo producto. Cuando el usuario presiona el botón de guardar, el manejador del botón envía una acción productAdded, que contiene los datos del nuevo producto que el usuario ingresó en el formulario. La función reductora que escribimos para el slice de productos recibe esta action y añade al array de productos el objeto con el nuevo producto. La store notifica a los componentes que los datos de state almacenados han sido modificados. Nuestro componente ProductsList lee el array modificado, provoca un re-render, como resultado de lo cual vemos en la lista de productos el producto añadido.

Ahora abramos Redux DevTools en el navegador y añadamos en la aplicación otro producto, luego observemos la pestaña Log monitor; aquí podemos ver cómo era nuestro state al iniciar la aplicación, y cómo luego, después de presionar el botón de guardar, apareció la action. Podemos ver su propiedad payload y los cambios en el estado global.

En el próximo capítulo, trabajaremos más a fondo con los datos en nuestra aplicación Redux.