React Redux vs Context API

React Redux y la API Context son herramientas que gestionan el estado global de la aplicación y sirven para facilitar la comunicación de datos entre componentes.

Los frameworks se utilizan para almacenar información en variables de fácil acceso. Sin estas bibliotecas de gestión de estado, la única forma de pasar información entre componentes es a través de accesorios, es decir, el padre pasa información al elemento hijo, el hijo al elemento siguiente, y así sucesivamente. Este problema se llama prop drilling. Cuando el programa tiene muchos componentes, pasar accesorios manualmente se vuelve extremadamente laborioso y repetitivo.

Entonces, ¿cuál administrador de estado debe usarse en las aplicaciones? La respuesta es... depende. Ambas tecnologías tienen ventajas y desventajas. Las abordaremos en los siguientes puntos.

¿Cuáles son las principales diferencias entre los frameworks?

La principal diferencia entre los dos frameworks es la complejidad y la organización. Ambos tienen contextos donde uno será mejor que el otro.

Por ejemplo, en aplicaciones que necesiten un nivel de organización más refinado y que traten con varias reglas de negocio, tiene mucho más sentido utilizar Redux. Sin embargo, en una aplicación más sencilla o para un principiante que quiera entender el funcionamiento del estado global, será más práctico usar la API de Context.

React Redux

Redux es una biblioteca responsable de administrar los datos de la aplicación de manera unidireccional. Todos los datos deben ir hacia el estado global.

Esta biblioteca utiliza conceptos algo complejos, como xos, actions, reducers, stores e dispatches:

Store

En React, el estado global es un objeto con propiedades a las que pueden acceder otros elementos. Este objeto es donde se almacenan los datos de estado. Es un centro de información que puede recibir y enviar datos a los componentes.

Action

Las actions, como su nombre lo indica, son acciones que enviamos a la tienda. Por ejemplo, es posible crear y enviar una acción llamada CHANGE_NAME que cambiará el nombre de usuario guardado en la tienda. Sin embargo, la action es solo la intención de un cambio y para que se use de manera efectiva necesitamos el reducer.

Reducer

El reducer usa la información devuelta por la acción para cambiar el estado de manera efectiva, para activarse con un clic o cualquier otro evento que necesitemos dispatch.

Dispatch

Usamos dispatch para activar el reducer.

Aunque Redux es muy útil, es complejo y tiene varios pasos para usar. En el ejemplo a continuación ve cómo es la configuración inicial de Redux en React.
Primero necesitamos crear nuestra carpeta de archivos e instalar Redux.

npx create-react-app hello-react-redux

cd hello-react-redux

npm install redux react-redux

npm install --save-dev @types/react-redux

Luego de crear el directorio e instalar las dependencias, será necesario importar el Provider en index.js y pasar el store como props.

Luego, debe importar la función createStore de Redux y pasar rootReducer como parámetro para crear el estado global.

Ahora importamos la función combineReducer y creamos rootReducer. El rootReducer se encarga de trabajar con varios reductores en una misma store.

Después del rootReducer, es necesario crear un reducer. En el caso del ejemplo, será user.

Finalmente una action simple, encargada de cambiar el nombre de usuario.

Ahora la configuración inicial de Redux está lista. Para usar los datos en un componente, debe conectarlo a store.

La aplicación del ejemplo anterior tiene el estado inicial de "Sin nombre" representado en la pantalla. Al escribir la entrada y hacer clic en el botón, cambiamos el nombre en el estado global y, en consecuencia, el nombre que se muestra en la pantalla.

Obviamente, son muchos pasos, pero es un framework muy poderoso. Cuando se aplica a proyectos más grandes, la organización es mucho más clara que la de Context API, pero cuando el proyecto es más pequeño y más simple, puede ser más ventajoso usar Context.

Context API

A diferencia de Redux, Context API es nativa de React, es decir, no será necesario instalar ninguna biblioteca adicional. Al igual que Redux, Context API sirve para tratar los datos de la aplicación de forma unidireccional. Para demostrar mejor las diferencias entre las tecnologías, haremos una aplicación similar a la anterior, pero usando Context.

npx create-react-app hello-context-api

cd hello-context-api

Inicialmente creamos el Provider. En él usamos el enlace useState de React para crear estados simples y enviar esos estados como una propiedad de NameAppContext.Provider.

Luego se debe crear Context, elemento que da acceso a los datos de Provider.

Ahora importamos el Provider y renderizamos la aplicación dentro de él en index.js.

Ahora es posible acceder a los datos dentro del componente App.js. Los únicos pasos necesarios después de crear la configuración inicial son: importar useContext, importar el Context creado y seguir la sintaxis a continuación.

En el ejemplo anterior usamos muchos menos conceptos para controlar el estado global. Contexto no necesita actions o reducers y accede al estado global de la aplicación de forma directa y sencilla (también es fácil visualizar el funcionamiento de las funciones de Context).

Conclusión

Redux y Context funcionan con el estado global. Redux es mucho más versátil que Context API y puede aplicar fácilmente en varios idiomas diferentes. Además, debido a que tiene varias partes bien definidas, es mucho más fácil separar y organizar la aplicación con Redux. Ahora, en el entorno de React, Context API es una opción a considerar. Su configuración simple y directa a menudo puede acelerar la entrega de trabajos que no necesitan tanta sofisticación.

Al pensar en la longevidad de un proyecto que crecerá cada vez más, incluso si la aplicación comienza de manera simple, vale la pena organizar la gestión del estado global con React Redux.

Entonces: ¿React Redux o Context Api?

No siempre será necesario utilizar un administrador de estado global. A veces la aplicación es demasiado simple para esa necesidad.

Redux debe usarse cuando hay varios estados para controlar o cuando varios componentes usan información del mismo estado. Context es mejor cuando tenemos pocas reglas de negocio o cuando la aplicación tiene pocos componentes.