¡Esta es una revisión vieja del documento!
Tabla de Contenidos
El contenedor de estado Redux
Notas del curso Desarrollo de aplicaciones web con React 18
Redux es un sistema que proporciona un almacén centralizado para el estado de una aplicación. A su vez, provee una interfaz denominada React-Redux que es la encargada de establecer la comunicación entre la aplicación de React y el almacén.
Aunque es muy común verlo utilizado junto a React, Redux es una biblioteca independiente que puede trabajar con otros mecanismos de desarrollo de interfaces, como Vue, Angular o Ember.
La idea principal de Redux es centralizar la información que deba ser global a toda la aplicación. En nuestro ejemplo principal del curso, dicha información podrían ser las diferentes listas de tareas que tenga el usuario que haya iniciado sesión, sus estados de completitud y datos asociados.
Evidentemente, no todo el estado de la aplicación debe almacenarse forzosamente en Redux. Es lógico que si hay partes de la aplicación con información local, como puede ser el estado de un formulario, esta se almacene localmente mediante useState, como ya conoces.
Elementos de una aplicación con Redux
Para programar utilizando Redux, es necesario familiarizarse con algunos términos que estudiaremos en detalle más adelante y que es importante que tengas claros:
- Acciones: una acción consiste en un objeto JavaScript que describe algún evento que ha ocurrido en la aplicación. Por ejemplo, al añadir una tarea a la lista de tareas se podría despachar una acción de tipo “
tareas/agregada”. Ojo, a pesar de su nombre, una acción no hace nada (no es una función), sino que describe una acción que se quiere realizar. Es como un mensaje que se transmite al almacén de Redux para que este sepa qué hacer. - Creador de acciones: se trata de una función que configura estos objetos que definen acciones, con su tipo y sus datos adicionales. Se utilizan para facilitar la creación de acciones.
- Reducers: llamaremos reducer a una función que tome el estado actual de la aplicación y una acción, y sea capaz de devolver un nuevo estado para la aplicación. Es decir, en jerga Redux, los reducer son realmente los que llevan las acciones a cabo. Al igual que en React, los estados no se pueden modificar sino que son inmutables, así que se debe devolver una copia con los valores convenientes actualizados.
- Almacén (store): se trata del objeto que almacena todo el estado de Redux.
- Selectores: son funciones que extraen los datos que necesitamos del almacén. Facilitan acceder a partes concretas del estado cuando este aumenta de tamaño y complejidad.
- Slices: son secciones que implementan el comportamiento y la gestión del estado de una parte de la aplicación, cada una aislada del resto.
Flujo de datos en Redux
Redux funciona fundamentalmente de la misma forma que React de cara a la gestión del estado y actualización de la interfaz.
Cuando se inicializa la aplicación, se crea el almacén de Redux y se le proporciona un reducer inicial. Se llama por primera vez al reducer y se obtiene un estado inicial, que se aplica a la primera renderización de la aplicación. A partir de este momento, cada vez que ocurra un evento en la aplicación:
- El gestor del evento despacha una acción al almacén de Redux
- El almacén invoca a la función de reducción para que combine el estado actual con la acción, obteniendo un nuevo estado
- El almacén notifica a todos los componentes que estén conectados de que el estado se ha actualizado
- Cada componente recupera los datos necesarios del almacén y lanza una renderización si su interfaz ha cambiado
Este es sin duda el módulo más complejo del curso. Dedícale tiempo a entender bien todo lo que se explica y vuelve hacia atrás para repasar conceptos e ideas si no los tienes claros. Abre el código que se entrega con el módulo para verlo en contexto mientras se explica. Por supuesto, deberías invertir tiempo en replicar en tu máquina los ejemplos que se muestran para realmente entenderlos. Es crucial que comprendas bien cómo funciona Redux para poder utilizarlo en tus propias aplicaciones. No te preocupes si no lo entiendes todo a la primera, ya que iremos viendo cada uno de los elementos de forma individual, tanto en la teoría como en los vídeos de demostración.