Para muchos desarrolladores crear aplicaciones utilizando Redux con React puede ser más un problema que una solución a la hora de gestionar states (estados). De hecho, muchos conocen la herramienta, pero evitan utilizarla.
Esto se debe sobretodo a la curva de aprendizaje demasiado pronunciada de Redux, ya que la herramienta está pensada - desde su inicio - para gestionar flujos de datos de aplicaciones complejas, además de ser una biblioteca externa.
Hoy, más que entrar en un debate Redux vs Context API, o un debate sobre cuál de las dos es mejor para tu próximo proyecto, me gustaría reflexionar contigo sobre por qué y en qué situaciones Context API puede ser una alternativa a Redux.
¿Qué es Redux?
Redux es un “contenedor de estados” previsible y centralizado para aplicaciones de JavaScript.
¿Por qué utilizar Redux?
Redux permite que tus aplicaciones tengan un comportamiento consistente en diferentes entornos y, además, tengan sus estados estados y lógicas centralizados para que puedas hacer cosas como "deshacer, o rehacer". Entre muchos otros detalles, Redux viene con un depurador que permite “viajar en el tiempo” - Context no lo hace -, y además permite prevenir renders desnecesarios. Un ejemplo de aplicación sería los productos en un carrito de compra, de tu e-commerce.
¿Qué es Context API?
Según React, Context “proporciona una forma de pasar datos mediante el árbol de componentes sin pasar props manualmente a todos los niveles”. Context es parte de React desde hace mucho tiempo, por eso Redux lo utiliza. Por ejemplo, en el componente Provider de la API antigua de Context. React Context API también es usada por otras bibliotecas como Mobx-react, o glamorous.
¿Por qué utilizar Context API?
En React normalmente se pasan los datos de padre a componente hijo, mediante propiedades (props). Lo que pasa es que este método no funciona correctamente en todos los casos, o para todos los tipos de datos. A veces ocurre también que pasas datos a componentes hijos sin usarlos - ¿no es cierto?.
Context se diseñó con el objetivo de compartir datos considerados “globales” para un árbol de componentes de React. Es interesante, por ejemplo, cuando tengas en el árbol de componentes datos del usuario autenticado actualmente, la plantilla seleccionada, o el idioma preferido.
Te dejo dos ejemplos de la documentación oficial de Context. En el "Ejemplo 2" podemos ver como Context nos permite evitar pasar propiedades.
¿Cómo usar Context?
Cómo ya hemos dicho anteriormente, Context siempre ha existido en React, y también gracias a esta funcionalidad existe Redux, pero la nueva API de Context tiene las siguientes características principales:
- React.createContext. Puede recibir un valor por defecto - y no valor inicial - que recibirá posteriormente el Consumer cuando en el árbol no haya Provider. Si no pasas un valor por defecto, el valor será undefined. Caso contrario, retorna un objeto con un Provider y un Consumer.
- El Provider. El componente Provider es usado en la parte más alta del árbol y acepta una propiedad llamada value. Este value puede ser lo que quieras. Si necesitas pasar varios valores, tendrás que crear un objeto con todos estos valores. El componente <Context. Provider /> tendrá su estado, props y un ciclo de vida de componente.
- El Consumer. El componente Consumer estará debajo del Provider en el árbol. Consumer acepta una propiedad llamada children y debe ser una función que acepta value de Provider y retorna un JSX. Además llama la función en el momento de renderizar.
Creo que es importante referir también que el Provider y el Consumer son un par inseparables. Además, solamente se comunican entre ellos. De la misma forma Context no tiene su propio estado. Piensa en Context como un canal para tus datos.
¿De qué forma Context es una alternativa a Redux?
Si no vas a usar las muchas de las características que ofrece Redux, las siguientes son algunas de las razones por qué Context es mejor alternativa para tu proyecto:
- Si no necesitas un middleware. Un middleware sería algo como una “función que se ejecuta siempre que una acción es realizada“. Por ejemplo, si necesitas centralizar tu registro de eventos en tu software de eventos, usarias un middleware. Cómo hemos dicho anteriormente, los Reducers especifican como el estado de una aplicación cambia en respuesta a acciones enviadas al almacén.
- Si necesitas algo parecido a datos globales. Para el “theme” que usamos en el ejemplo de este artículo.
- Si quieres gestionar estados desde cualquier componente. Redux puede ser demasiado complejo y abstracto solamente para realizar esta funcionalidad. Con Context API puedes crear contextos para almacenar datos.
Conclusión
Redux es y seguirá siendo por algún tiempo una herramienta potente para tu caja de herramientas y aplicaciones, pero su complejidad y el hecho de que la API de Context sea nativa de React, y ahora también “es oficial”, puede hacer que desarrolladores dejen de usarlo, pasando a usar directamente Context. Pero como siempre, escoger la mejor solución dependerá de los requisitos y necesidades de tu proyecto.
Debes tener en mente que no todo son buenas noticias, obviamente. Con Context, la nueva API solamente permite que un Consumer lea valores de un solo tipo de Provider. Un consumidor, un proveedor. Eso hace que context sea ideal para actualizaciones como del idioma, o la plantilla a utilizar en la página, pero de momento no está recomendada por determinados sectores para la gestión general del estado de tu aplicación.
Para terminar, creo que React Context API puede ser una buena solución cuando lo que necesitas es una simple gestión de estados. Pero debes recordar que el propósito de Redux es el de gestionar el estado de una aplicación, mientras que el de Context es pasar propiedades.
Reflexionar sobre usar Context como alternativa a Redux debe contemplar, por tanto, cuestiones como si la APP escalará, el número de miembros del equipo a trabajar en ella, la experiencia de los miembros del equipo, etc. Si Redux es demasiado complejo para el proyecto, y lo que quieres obtener datos de X a Y, entonces Context API es una alternativa.
¿En qué casos usas la API de Context envés de Redux?
Foto: Lukas Bieri en Pixabay
Fuentes:
