Introducción
Cuando las aplicaciones crecen demasiado, puede llegar a ser difícil controlar el estado de la aplicación y los cambios que tienen que realizarse cuando esta cambia. Y aquí es donde entra Redux.
Redux es una librería que permite controlar el estado de las aplicaciones web de una forma muy sencilla. El estado de la aplicación es toda aquella información que necesite la aplicación para funcionar correctamente. Esta información pueden ser datos externos que obtengamos desde el servidor o datos de la interfaz de usuario que, por ejemplo, le indiquen a la aplicación que tiene que desplegar un menú o mostrar un modal.
Al trabajar con Redux, uno de los primeros pasos que tendríamos que realizar es definir la estructura del estado.
El creador de Redux, Dan Abramov, se ha basado en el patrón Flux propuesto por Facebook para manejar el estado de las aplicaciones siguiendo un flujo de datos unidireccional.
Esta librería se ha creado pensando en React, pero puede ser usada junto a otras librerías y frameworks como Angular, VUE…
Principios de Redux
Redux sigue tres principios básicos para manejar el estado de las aplicaciones.
Única fuente de la verdad
El estado de la aplicación se encuentra almacenado en un único Store. Esto hace mucho más fácil modificarlo, depurar la aplicación, testearla…
Estado inmutable
El estado es inmutable, es decir, es solo de lectura. De esta forma evitamos que se modifique en alguna parte de la aplicación que no estamos controlando nosotros.
Los cambios los realizan funciones puras
La única forma de modificar el estado es creando uno nuevo a partir del estado anterior y una acción que define el cambio.
Actions
Las acciones son objetos que definen el cambio que hay que realizar al estado. Estos objetos tienen que llevar una propiedad type que es un string que se va a usar para indicarle al reducer qué cambio tiene que realizar en el estado.
Si para realizar ese cambio se necesita algún dato extra, también hay que añadirlo al objeto que define la acción. Por ejemplo, si queremos añadir una nueva tarea a nuestra lista de tareas, debemos de enviar la tarea al reducer para que la añada a la lista de tareas que había.
Reducers
En uno de los tres principios que sigue Redux se indica que el estado es cambiado por funciones puras y esto es lo que son los reducers.
Los reducers son las funciones puras que se van a encargar de crear el nuevo estado a partir de la acción que le llega y del estado previo. En el reducer se comprobará qué acción ha llegado y mirará qué cambio tiene que realizar al estado. En el caso en el que reciba una acción que no se ha definido, deberá de dejar el estado como estaba.
Al crear el Store, a este se le indica cuál es el reducer encargado de realizar los cambios de estado, pero Redux nos da la oportunidad de separar el estado en distintas partes y crear distintos reducers para que estos cambios sean más manejables.
Pero, al crear el Store, este solo puede recibir un reducer, ¿no? Sí, y Redux tiene una función que se encarga de crear un único reducer a partir de todos los que hayamos creado.
Store
El Store es el elemento que se encarga de unir todo lo comentado hasta ahora. Sus tareas son las siguientes:
- Guardar el estado de la aplicación.
- Permitir que la aplicación acceda al estado.
- Emitir las acciones para actualizar el estado.
- Registrar los listeners y eliminar el registro.
