Patrón Provider: Inyección de Dependencias

Patrón Provider: inyección de dependencias

El patrón Provider permite compartir dependencias o estado a través del árbol de componentes sin pasar props manualmente en cada nivel. En React suele implementarse con Context API y hooks de consumo.

Qué puede proveer un Provider

• Cliente de API o repositorio de datos.


• Usuario autenticado y permisos.


• Tema visual, idioma o configuración.


• Funciones compartidas como tracking, feature flags o notificaciones.

const AnalyticsContext = createContext(null);



export function AnalyticsProvider({ client, children }) {

  return (

    <AnalyticsContext.Provider value={client}>

      {children}

    </AnalyticsContext.Provider>

  );

}



export function useAnalytics() {

  const client = useContext(AnalyticsContext);

  if (!client) throw new Error("useAnalytics must be used inside AnalyticsProvider");

  return client;

}

Ventaja arquitectónica

El componente que usa la dependencia no necesita saber cómo se construye. Esto facilita testing, reemplazo de clientes y separación entre infraestructura y UI.

Ejercicio: Provider de notificaciones

Diseñá un NotificationProvider con un hook useNotifications. Debe exponer una función notify y evitar que se use fuera del provider.

Checklist

• Context creado en un archivo separado.


• Hook de consumo con error claro si falta provider.


• Ejemplo de uso en un botón.