Módulo 6: Gestión de Estado

6.1 Introducción a la Gestión de Estado

Problemas comunes con el estado en React:

A medida que las aplicaciones crecen en tamaño y complejidad, gestionar el estado de los componentes puede volverse complicado. Los problemas comunes con la gestión de estado en React incluyen:

• Prop drilling: Pasar props a través de múltiples niveles de componentes, lo que puede llevar a un código desordenado y difícil de mantener.
• Duplicación de estado: Tener el mismo estado en múltiples componentes, lo que puede causar problemas de sincronización y aumentar la posibilidad de errores.
• Dificultad para compartir estado: Compartir datos entre componentes hermanos o distantes puede ser engorroso sin un enfoque adecuado.

Ventajas de un sistema de gestión de estado:

Un sistema de gestión de estado, como Redux o la Context API de React, aborda estos problemas al proporcionar un lugar centralizado para almacenar y gestionar el estado de la aplicación. Esto permite:

• Acceso sencillo al estado desde cualquier componente.
• Evitar la duplicación innecesaria de estado.
• Facilitar el intercambio de datos entre componentes.
• Simplificar el proceso de seguimiento y depuración de cambios en el estado.

6.2 Context API

Creación y consumo de contextos:

La Context API es una característica incorporada en React que permite compartir datos a través de la jerarquía de componentes sin necesidad de pasar props manualmente en cada nivel.

Creación de un contexto:

import React from 'react';

const MiContexto = React.createContext();

export default MiContexto;
    

Consumo de un contexto:

import React from 'react';
import MiContexto from './MiContexto';

const ComponenteConsumidor = () => {
  return (
    <MiContexto.Consumer>
      {(valor) => <p>Valor del contexto: {valor}</p>}
    </MiContexto.Consumer>
  );
};

export default ComponenteConsumidor;
    

Evitando la prop drilling:

import React from 'react';
import MiContexto from './MiContexto';
import ComponenteConsumidor from './ComponenteConsumidor';

const ComponenteProductor = () => {
  const valor = 'Este es el valor compartido';

  return (
    <MiContexto.Provider value={valor}>
      <ComponenteConsumidor />
    </MiContexto.Provider>
  );
};

export default ComponenteProductor;
    

La Context API es una excelente opción para gestionar el estado global o compartir datos específicos entre componentes sin recurrir al prop drilling. Sin embargo, si la aplicación crece en complejidad, también puedes considerar la integración de bibliotecas de gestión de estado como Redux.

En los siguientes módulos, exploraremos temas más avanzados y trabajaremos en la creación de aplicaciones completas con React.