Tutorial avançado do React: Integração do Redux com a API de contexto

Cuando se trata de manejar el estado en aplicaciones grandes de React, dos enfoques surgen como los más populares: Redux y el Context API de React. Ambos tienen sus ventajas y desventajas, pero ¿qué sucede si deseas combinarlos para sacar lo mejor de ambos mundos? En este artículo, vamos a examinar cómo lograr esta integración y qué beneficios puede aportar a tu proyecto.

¿Por qué considerar la combinación?

El manejo del estado en aplicaciones complejas puede llegar a ser un verdadero desafío. Redux, con su arquitectura basada en la centralización del estado, permite gestionar cambios de manera predecible y coherente. Sin embargo, no es raro que su boilerplate se convierta en una carga. Por otro lado, el Context API es nativo de React y ofrece una forma fácil de compartir datos entre componentes sin tener que pasar props manualmente, pero presenta limitaciones cuando se requiere una gestión de estado más estructurada.

Integramos estos enfoques no sólo para mejorar la eficiencia en el manejo del estado, sino también para reducir la cantidad de código redundante que a menudo acompaña a Redux.

Configurando el proyecto

Comenzaremos configurando un nuevo proyecto de React en el cual implementaremos tanto Redux como el Context API. Asegúrate primero de tener instalado Node.js y un gestor de paquetes como npm o yarn. Inicializa un nuevo proyecto usando Create React App:

$ npx create-react-app my-redux-context-app
$ cd my-redux-context-app

Instalando Redux y configuraciones iniciales

Una vez creado el proyecto, procede a instalar Redux y react-redux utilizando npm o yarn:

$ npm install redux react-redux

Crea una carpeta llamada store dentro del directorio src y dentro de ella añade un archivo llamado index.js. Aquí es donde definirás tus reducers y crearás el store:

// src/store/index.js
import { createStore } from redux;
// Define tu reducer
const initialState = {};
function rootReducer(state = initialState, action) {
  return state;
}
const store = createStore(rootReducer);
export default store;

Implementación del Context API

Ahora pasamos al Context API. Crea una nueva carpeta llamada context dentro del directorio src. Dentro, crea un archivo AppContext.js:

// src/context/AppContext.js
import React from react;
const AppContext = React.createContext();
export default AppContext;

A continuación, envolvemos nuestra aplicación con ambos: el Provider de Redux y el Provider del Context:

// src/index.js
import React from react;
import ReactDOM from react-dom;
import { Provider } from react-redux;
import App from ./App;
import store from ./store;
import AppContext from ./context/AppContext;

ReactDOM.render(, document.getElementById(root));

Caso práctico: Contador combinado

Imaginemos que queremos implementar un contador cuyo estado dependa tanto de nuestro store global via Redux como del contexto local. Usaremos Redux para manejar las acciones relacionadas con incrementar o decrementar, mientras que definiremos algún valor específico en nuestro contexto.

// src/components/Counter.js
import React from react;
import { useSelector, useDispatch } from react-redux;
import AppContext from ../context/AppContext;

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  const contextValue = React.useContext(AppContext); // Obteniendo datos desde el context

  return (
    <div>
      <p>Contador: {count}</p>
      <p>Valor desde contexto: {contextValue.someValue}</p>
    </div>
 }
export default Counter;

Ventajas y limitaciones

La principal ventaja de usar ambos sistemas es la flexibilidad en términos de control del estado. Permite segmentar responsabilidades y optimizar las partes específicas según las necesidades del componente o módulo en cuestión. No obstante, integrar sistemas disímiles como estos puede incrementar la complejidad general del código si no se maneja adecuadamente.

Outros artigos que podem lhe interessar