fp-ts-react
Construye aplicaciones Type-Safe con React usando patrones de fp-ts
Gestionar estado, errores y operaciones asíncronas en React a menudo genera errores por valores nulos o fallos no manejados. Esta guía proporciona patrones prácticos de fp-ts para gestión de estado type-safe, validación de formularios con acumulación de errores y obtención de datos asíncronos confiable.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "fp-ts-react". Usuario envía formulario de registro con email inválida y contraseña corta
النتيجة المتوقعة:
- El formulario muestra dos mensajes de error juntos:
- - Dirección de email inválida
- - La contraseña debe tener al menos 8 caracteres
- Los datos del formulario no se envían hasta que todas las validaciones pasan
استخدام "fp-ts-react". Componente de dashboard obtiene perfil de usuario, estadísticas y notificaciones en paralelo
النتيجة المتوقعة:
- El estado inicial muestra spinner de carga
- Las tres solicitudes de API se ejecutan concurrentemente
- El estado de éxito muestra el dashboard completo con información del usuario, métricas y lista de notificaciones
- Si alguna solicitud falla, el estado de error muestra con opción de reintentar
التدقيق الأمني
آمنAll 91 static analysis findings are false positives. The SKILL.md file is documentation containing TypeScript code examples in markdown format. Detected 'external_commands' are markdown backtick code blocks, not shell execution. Network findings reference example URLs in documentation. No executable code or actual security risks present.
درجة الجودة
ماذا يمكنك بناءه
Validación de formularios con recolección de errores
Valida formularios de registro mostrando todos los errores de campos a la vez en lugar de uno a la vez. Usa Either con validación applicative para recolectar errores de email, contraseña y campos de nombre simultáneamente.
Obtención de datos de API con manejo adecuado de estado
Reemplaza banderas booleanas (isLoading, isError, data) con el tipo RemoteData que fuerza exactamente cuatro estados: NotAsked, Loading, Failure, Success. Elimina combinaciones de estado imposibles.
Datos opcionales de usuario type-safe
Maneja estados de UI de usuario logueado vs desconectado usando el tipo Option en lugar de verificaciones nulas. Haz pattern match en la presencia del usuario para renderizado condicional más limpio sin cláusulas de guarda de undefined.
جرّب هذه الموجهات
Muéstrame cómo usar el tipo Option de fp-ts en React para manejar un perfil de usuario que puede no estar cargado aún. Incluye un hook useState y pattern match con O.match para renderizar diferentes estados de UI.
Crea una validación de formulario de registro usando fp-ts Either que muestre todos los errores de validación a la vez. Valida formato de email, longitud de contraseña (8+ caracteres) y campo de nombre requerido. Usa sequenceS para combinar validadores.
Escribe un hook personalizado useFetch usando fp-ts TaskEither que envuelva la API de fetch. Maneja errores HTTP, estados de carga y proporciona resultados type-safe. Muestra cómo encadenar múltiples llamadas a API con flatMap.
Implementa el patrón RemoteData para React con cuatro estados: NotAsked, Loading, Failure, Success. Crea una función fold para hacer pattern match de todos los estados y muestra un componente UserProfile completo que obtiene datos al montarse.
أفضل الممارسات
- Usa useMemo para prevenir re-renderizados innecesarios al crear valores de fp-ts como O.some() que generan nuevas referencias en cada render
- Prefiere RemoteData sobre booleanos separados de loading/error/data para eliminar combinaciones de estado imposibles a nivel de tipo
- Usa Either con validación applicative (sequenceS) para formularios para mostrar todos los errores de campos en lugar de fallar en el primer error
تجنب
- No uses fp-ts Option Either TaskEither directamente como valores de arreglo de dependencias de React sin memoización - crean nuevas referencias en cada render
- Evita mezclar verificaciones de null undefined con Option en el mismo código - comprométete completamente con los patrones fp-ts para consistencia
- No uses TaskEither para operaciones síncronas - resérvalo para operaciones asíncronas que pueden fallar, usa Either para validación síncrona