A medida que nuestra aplicación crece, la comunicación entre componentes se vuelve más compleja y es aquí donde entra Redux.

Redux es una librería que nos va a permitir definir un estado compartido para simplificar la comunicación entre componentes, también es independiente de ReactJs y se puede utilizar con cualquier otro framework. Redux es fácil de entender pero tiene terminologías que hacen difícil el proceso del aprendizaje.

 

Pongamos un ejemplo: Tenemos 2 componentes un componente llamado product-list y otro componente llamado shopping-cart y lo que queremos hacer es que cuando se oprima el botón de “comprar” ese producto se agregue al shopping-cart.

Ahora bien, el elemento principal de Redux es el store que no es más que un objeto que mantiene un estado compartido para toda la aplicación y es el intermediario en la comunicación entre componentes, lo que se recomienda es tener un único store por aplicación. El Store almacena el estado dentro de un objeto de JavaScript al igual que lo hace React en los componentes pero con la ventaja que lo podemos acceder desde cualquier parte de nuestra aplicación. El Store tiene 3 métodos públicos los cuales son los más utilizados:

subscribe(fn)
dispatch(action)
getState()
 

El getState() nos permite obtener el estado actual, es el más fácil. Subscribe(fn) nos permite suscribirnos al Store para ser informados cada vez que cambiamos el estado y dispatch(action) nos permite solicitar cambios al estado.  

Store
 
{
    cart: []
}
 

Ahora bien, supongamos que nuestro componente shopping-cart quiere suscribirse al store para escuchar todos los cambios al estado y para esto desde el constructor de este componente llamamos el método subscribe() y le pasaremos una función que es la que el Store va llamar cada vez que hay cambios en el estado.

store.subscribe(() => {
    this.setState({
   cart: store.getState().cart
});
});
 

También si queremos cambiar el estado porque alguien agrego un producto al carrito de compras ejecutamos el método dispatch() ese método recibe un objeto al que en Redux se le conoce como un action, ese objeto tiene una llave type el cual cuyo valor es generalmente una cadena del texto con la que vamos a identificar el cambio al estado que queremos realizar, recuerda que el cambio como tal lo hace la función reductora de la que vamos a hablar más adelante y las demás llaves de ese objeto (Action) son los argumentos que se van a utilizar dentro de la función reductora. Por último una vez que se ha cambiado el estado, el store se encarga de notificar a todos los subscriptores en este caso el componente shopping-cart mostraría el producto en la lista.

store.dispatch({ // Action
    type: "ADD_TO_CART",
    product: product
});
 

Entonces, el Store mantiene el estado de la aplicación de forma centralizada, permite el acceso al estado a través de getState(), permite que los suscriptores se registren a través del  método subscribe(fn) pasandole un callback y permite que el estado sea actualizado a través del método dispatch(action), el action no es más que un objeto de javascript que tiene una llave type y el resto de parámetros que dependen de lo que se quiera hacer. Por último el store se crea con el método createStore(reducerFn) y se le pasa una función a la cual se le conoce como función reductora.

¿Que es la función reductora? es una función que recibe un estado, una acción y retorna un nuevo estado.

const fn = (prevState, action) => {
    // return new state
};
 

El Store invoca la función reductora siempre que recibe un llamado al método dispatch(action). Por ejemplo, agregar un elemento al carrito de compras.

Lo interesante de las funciones reductoras es que son fáciles de testear o de hacerles pruebas automatizadas porque podemos definir simplemente un estado inicial de prueba, una acción y verificar que lo que la función reductora retorne sea lo que uno espera.

El otro concepto que Redux maneja son los actions que son los objetos que se le pasan al método dispatch() del store. Generalmente se utiliza la llave type dentro de ese action para definir la acción que se quiere realizar, las demás llaves son parámetros o argumentos que se van a utilizar en la función reductora para lograr hacer el cambio que se busca.

{type: "ADD_TO_CART", product: product }
{type: "TOGGLE_TO_DO", toDoId: 1}
{type: "EDIT_PLACE", placeId: 1, name: "Cristina Rojas"}
 

Por último tenemos otro concepto importante que maneja Redux llamado Action Creators los cuales son funciones que retornan un action. Son opcionales pero utilizarlas tiene varias ventajas.

  • La primer ventaja es que documentan mejor el código, por ejemplo:

El action lo encapsularíamos dentro de un método

store.dispatch({
    type: "ADD_TO_CART",
    product: product
})
 

En este caso:

store.dispatch(addToCart(product));
 

  • Facilitan conocer los parámetros que necesita la acción en la función reductora.
  • Permite agregar lógica adicional (llamar a un servidor remoto).
     

@telecristy.
 

¿Te gustó esta publicación? Márcala como favorita