Lección 7 de 12 · Lectura y práctica
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.
Del concepto a la práctica
Taller de esta lección
La inyección de dependencias separa el componente que solicita una operación del objeto concreto que la realiza. Así, una pantalla puede trabajar con un repositorio real durante la ejecución y con uno determinista durante la prueba, sin condicionar su lógica a una implementación global.
Ejemplo resuelto
const OrdersContext = React.createContext(null);
function OrdersProvider({repository, children}) {
return <OrdersContext.Provider value={repository}>{children}</OrdersContext.Provider>;
}
function useOrders() {
const repository = React.useContext(OrdersContext);
if (!repository) throw new Error("Falta OrdersProvider");
return repository;
}Un repositorio de prueba puede ser {list: () => [{id:1,status:"sent"}]}.
Pruébalo
Crea el repositorio determinista anterior.
Pásalo al Provider alrededor de la pantalla.
Invoca
listy verifica el registro con id1.
Comprueba tu resultado
Error frecuente: importar el cliente concreto dentro de la pantalla, anulando la inyección. Corrígelo consumiendo solo el hook.
Ejercicio: sustituye el repositorio por otro que devuelva dos registros; el componente debe mostrar ambos sin cambios internos.
El repositorio del ejemplo es síncrono. Si list devuelve una Promise en producción, define ese contrato también en el doble de prueba y gestiona carga, rechazo y desmontaje fuera del render; no intercambies una interfaz síncrona y una asíncrona sin adaptar el consumidor.
Mapa de prácticaEl Provider se sitúa por encima de las pantallas que necesitan el carrito. Catálogo, detalle y carrito leen la misma fuente: dos líneas con cantidades 2 y 1 suman tres unidades, y Context no aporta persistencia por sí solo.
Ver la infografía en tamaño completo ↗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.
Sigue con React Intermedio: Patrones y Optimización
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.