المهارات fp-ts-react
📦

fp-ts-react

آمن

Créer des applications React type-safe avec les motifs fp-ts

La gestion de l'état, des erreurs et des opérations asynchrones dans React conduit souvent à des bugs liés aux valeurs nulles ou aux échecs non gérés. Cette compétence fournit des motifs fp-ts pratiques pour la gestion d'état type-safe, la validation de formulaire avec accumulation d'erreurs, et la récupération de données asynchrones fiable.

يدعم: Claude Codex Code(CC)
🥉 74 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "fp-ts-react". L'utilisateur soumet un formulaire d'inscription avec un email invalide et un mot de passe court

النتيجة المتوقعة:

  • Le formulaire affiche deux messages d'erreur ensemble :
  • - Adresse email invalide
  • - Le mot de passe doit contenir au moins 8 caractères
  • Les données du formulaire ne sont pas soumises tant que toutes les validations ne sont pas réussies

استخدام "fp-ts-react". Le composant tableau de bord récupère le profil utilisateur, les statistiques et les notifications en parallèle

النتيجة المتوقعة:

  • L'état initial affiche un indicateur de chargement
  • Les trois requêtes API s'exécutent simultanément
  • L'état succès affiche le tableau de bord complet avec les infos utilisateur, les métriques et la liste des notifications
  • Si une requête échoue, l'état erreur s'affiche avec une option de réessai

التدقيق الأمني

آمن
v1 • 2/25/2026

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.

1
الملفات التي تم فحصها
797
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

Validation de formulaire avec collecte d'erreurs

Validez les formulaires d'inscription en affichant toutes les erreurs de champs à la fois au lieu d'une à la fois. Utilisez Either avec la validation applicative pour collecter les erreurs des champs email, mot de passe et nom simultanément.

Récupération de données API avec gestion d'état appropriée

Remplacez les indicateurs booléens (isLoading, isError, data) par le type RemoteData qui impose exactement quatre états : NotAsked, Loading, Failure, Success. Élimine les combinaisons d'états impossibles.

Données utilisateur optionnelles type-safe

Gérez les états UI connecté/déconnecté en utilisant le type Option au lieu de vérifications null. Effectuez un pattern matching sur la présence de l'utilisateur pour un rendu conditionnel plus propre sans clauses de garde undefined.

جرّب هذه الموجهات

Motif Option de base pour les valeurs manquantes 
Montrez-moi comment utiliser le type Option fp-ts dans React pour gérer un profil utilisateur qui peut ne pas encore être chargé. Incluez un hook useState et un pattern matching avec O.match pour afficher différents états UI.
Validation de formulaire collectant toutes les erreurs 
Créez une validation de formulaire d'inscription utilisant fp-ts Either qui affiche toutes les erreurs de validation à la fois. Validez le format email, la longueur du mot de passe (8+ caractères) et le champ nom requis. Utilisez sequenceS pour combiner les validateurs.
Hook personnalisé avec TaskEither pour les appels API 
Écrivez un hook useFetch personnalisé utilisant fp-ts TaskEither qui enveloppe l'API fetch. Gérez les erreurs HTTP, les états de chargement et fournissez des résultats type-safe. Montrez comment chaîner plusieurs appels API avec flatMap.
Machine d'état RemoteData pour UI asynchrone complexe 
Implémentez le motif RemoteData pour React avec quatre états : NotAsked, Loading, Failure, Success. Créez une fonction fold pour effectuer un pattern matching sur tous les états et afficher un composant UserProfile complet qui récupère les données au montage.

أفضل الممارسات

  • Utilisez useMemo pour éviter les re-rendus inutiles lors de la création de valeurs fp-ts comme O.some() qui génèrent de nouvelles références à chaque rendu
  • Préférez RemoteData aux booléens séparés loading/error/data pour éliminer les combinaisons d'états impossibles au niveau des types
  • Utilisez Either avec la validation applicative (sequenceS) pour les formulaires afin d'afficher toutes les erreurs de champs au lieu d'échouer sur la première erreur

تجنب

  • N'utilisez pas fp-ts Option Either TaskEither comme valeurs de tableau de dépendances React directement sans mémoisation - ils créent de nouvelles références à chaque rendu
  • Évitez de mélanger les vérifications null undefined avec Option dans la même base de code - engagez-vous pleinement dans les motifs fp-ts pour la cohérence
  • N'utilisez pas TaskEither pour les opérations synchrones - réservez-le pour les opérations asynchrones qui peuvent échouer, utilisez Either pour la validation synchrone

الأسئلة المتكررة

Qu'est-ce que fp-ts et pourquoi l'utiliser avec React ?
fp-ts est une bibliothèque de programmation fonctionnelle pour TypeScript qui fournit des types comme Option (pour les valeurs manquantes), Either (pour les erreurs) et TaskEither (pour les opérations asynchrones). Elle apporte la sécurité des types aux motifs React courants, attrapant les bugs à la compilation plutôt qu'à l'exécution.
fp-ts vaut-il la courbe d'apprentissage pour les projets React ?
Pour les équipes à l'aise avec TypeScript et la programmation fonctionnelle, fp-ts réduit les erreurs d'exécution et améliore la clarté du code. Pour les projets plus simples, la complexité ajoutée peut ne pas être justifiée. Commencez par Option et Either avant d'adopter TaskEither et ReaderTaskEither.
Comment RemoteData améliore-t-il useState avec les drapeaux de chargement et d'erreur ?
RemoteData encode exactement quatre états valides (NotAsked, Loading, Failure, Success) comme une union discriminée. Cela empêche les états impossibles comme loading=true avec error défini, qui sont possibles lors de l'utilisation d'indicateurs booléens séparés.
Puis-je utiliser les motifs fp-ts avec React Server Components ?
Oui. Option Either et les autres types synchrones fp-ts fonctionnent bien dans les Server Components. TaskEither est moins pertinent car les RSCs gèrent l'asynchrone différemment, mais les motifs de validation avec Either restent utiles pour la gestion des formulaires.
Quelles bibliothèques de hooks React fp-ts sont recommandées ?
Utilisez fp-ts-react-stable-hooks pour des hooks référentiellement stables qui comprennent l'égalité fp-ts. Cela empêche les re-rendus inutiles lors de l'utilisation des valeurs fp-ts comme dépendances. Pour RemoteData, @devexperts/remote-data-ts fournit le type avec des utilitaires utiles.
Comment gérer l'injection de dépendances avec fp-ts dans React ?
Combinez React Context avec ReaderTaskEither. Définissez une interface AppDependencies avec vos services (API, analytics, etc.), fournissez-la via Context, et utilisez ReaderTaskEither pour composer des opérations qui dépendent de ces services tout en gardant les composants testables.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/fp-ts-react

مرجع

main

بنية الملفات

📄 SKILL.md