Redux es una librería de JavaScript que permite la gestión del estado de una aplicación de una manera más eficiente y predecible. Fue creada por Dan Abramov y Andrew Clark en 2015 y ha ganado una gran popularidad en el ecosistema de React.
En un artículo anterior que publicamos en el blog, hablábamos del hook de React useReducer. Redux y useReducer son similares en el sentido de que ambos son herramientas que se utilizan para manejar el estado en una aplicación de React. Ambos proporcionan una forma de actualizar el estado de manera inmutable, es decir, sin modificar el estado anterior. También utilizan una función reductora (reducer) para especificar cómo actualizar el estado en función de una acción que se ha desencadenado.
Sin embargo, hay algunas diferencias importantes entre Redux y useReducer.
Redux es una biblioteca independiente que se utiliza para manejar el estado global de una aplicación, mientras que useReducer es un gancho (hook) integrado en React que se utiliza para manejar el estado local de un componente.
Además, Redux proporciona una forma de conectar múltiples componentes a un solo almacenamiento de estado, lo que facilita la comunicación entre los diferentes componentes de una aplicación. Esto puede ser útil en aplicaciones grandes y complejas donde el estado necesita ser compartido entre muchos componentes.
La elección entre Redux y useReducer depende del tipo de aplicación que estés construyendo y de las necesidades específicas de tu proyecto.
Redux es más adecuado para aplicaciones grandes y complejas que requieren una gestión de estado más avanzada. Proporciona una forma de mantener el estado global de la aplicación en un solo lugar y permite que múltiples componentes accedan y actualicen el estado de manera segura y controlada. Además, Redux ofrece herramientas poderosas para depurar, optimizar y monitorear el estado de la aplicación.
En contraste, useReducer es más adecuado para aplicaciones más simples que no necesitan una gestión de estado tan avanzada. Proporciona una forma de actualizar el estado de manera inmutable y se integra de forma natural con otros ganchos (hooks) de React, como useEffect y useContext.
En este artículo, vamos a dar una introducción a Redux y cómo se integra con React.
¿Qué es Redux?
Redux es una librería que se encarga de la gestión del estado de una aplicación. Se basa en tres principios fundamentales:
¿Por qué usar Redux?
Redux ofrece varias ventajas respecto a la gestión del estado sin librerías:
Integración con React
Para utilizar Redux en una aplicación de React, es necesario seguir los siguientes pasos:
Un ejemplo sencillo de implementación de Redux en una aplicación de React sería el siguiente:
// Importamos las dependencias
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
// Creamos el store
const store = createStore(reducer);
// Creamos el reducer
function reducer(state = { count: 0 }, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
// Creamos las acciones
function increment() {
return { type: 'INCREMENT' };
}
function decrement() {
return { type: 'DECREMENT' };
}
// Creamos el componente de React
function Counter({ count, increment, decrement }) {
return (
<div>
<p>Count: {count}</p>
<button onClick={ increment }>+</button>
<button onClick={ decrement }>-</button>
</div>
);
}
// Conectamos el componente al store
const ConnectedCounter = connect(
state => ({ count: state.count }),
{ increment, decrement }
)(Counter);
// Renderizamos el componente
ReactDOM.render(
<Provider store={store}>
<ConnectedCounter />
</Provider>,
document.getElementById('root')
);
En este ejemplo, creamos un contador simple que utiliza Redux para gestionar el estado. Creamos el store mediante la función createStore() y el reducer mediante una función que recibe el estado actual y la acción a realizar y devuelve el nuevo estado. También creamos las acciones mediante funciones que devuelven objetos con la información necesaria.
Luego, creamos un componente de React llamado Counter que muestra el valor del contador y dos botones para incrementar y decrementar su valor. Este componente se conecta al store mediante la función connect() de react-redux, que recibe dos argumentos: una función que mapea el estado del store a las propiedades del componente y un objeto que mapea las acciones a las propiedades del componente.
Finalmente, renderizamos el componente dentro de un componente Provider de react-redux que recibe el store como propiedad.
Aunque puede parecer complejo al principio, una vez que se entienden los conceptos básicos, el uso de Redux resulta sencillo y muy beneficioso.
Es importante tener en cuenta que no todas las aplicaciones necesitan Redux y que su uso puede aumentar la complejidad del código en algunas situaciones. En cualquier caso, es una herramienta muy valiosa que merece la pena conocer y utilizar cuando sea necesario.
