fp-ts-react
使用 fp-ts 模式构建类型安全的 React 应用
在 React 中管理状态、错误和异步操作通常会因为空值或未处理的失败而导致 bug。本技能提供实用的 fp-ts 模式，用于类型安全的状态管理、带错误收集的表单验证，以及可靠的异步数据获取。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "fp-ts-react". 用户提交注册表单，邮箱无效且密码过短
النتيجة المتوقعة:
- 表单同时显示两个错误消息：
- - 邮箱地址无效
- - 密码必须至少 8 个字符
- 在所有验证通过之前不会提交表单数据
استخدام "fp-ts-react". 仪表板组件并行获取用户资料、统计数据和通知
النتيجة المتوقعة:
- 初始状态显示加载旋转器
- 所有三个 API 请求并发执行
- 成功状态显示包含用户信息、指标和通知列表的完整仪表板
- 如果任何请求失败，错误状态会显示并提供重试选项
التدقيق الأمني
آمن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.
درجة الجودة
ماذا يمكنك بناءه
带错误收集的表单验证
验证注册表单，一次性显示所有字段错误，而不是逐个显示。使用 Either 与应用式验证，同时收集邮箱、密码和姓名字段的错误。
带正确状态处理的 API 数据获取
使用 RemoteData 类型替换布尔标志（isLoading、isError、data），强制使用四种精确状态：NotAsked、Loading、Failure、Success。消除不可能的状态组合。
类型安全的可选用户数据
使用 Option 类型代替空检查来处理登录/登出 UI 状态。对用户存在性进行模式匹配，实现更清晰的条件渲染，无需 undefined 防护子句。
جرّب هذه الموجهات
展示如何在 React 中使用 fp-ts Option 类型来处理可能尚未加载的用户个人资料。包含 useState hook，并使用 O.match 进行模式匹配以渲染不同的 UI 状态。
使用 fp-ts Either 创建注册表单验证，一次性显示所有验证错误。验证邮箱格式、密码长度（8 个字符以上）和必填姓名字段。使用 sequenceS 组合验证器。
编写 useFetch 自定义 hook，使用 fp-ts TaskEither 包装 fetch API。处理 HTTP 错误、加载状态，并提供类型安全的结果。展示如何使用 flatMap 链接多个 API 调用。
为 React 实现 RemoteData 模式，包含四种状态：NotAsked、Loading、Failure、Success。创建 fold 函数对所有状态进行模式匹配，并展示完整的 UserProfile 组件，在挂载时获取数据。
أفضل الممارسات
- 使用 useMemo 防止不必要的重新渲染，当创建 fp-ts 值（如 O.some()）时，每次渲染都会生成新的引用
- 优先使用 RemoteData 而不是独立的 loading/error/data 布尔值，在类型级别消除不可能的状态组合
- 对表单使用带应用式验证（sequenceS）的 Either，显示所有字段错误而不是在第一个错误处失败
تجنب
- 不要直接将 fp-ts Option、Either、TaskEither 用作 React 依赖数组值而不经 memoization - 它们每次渲染都会创建新引用
- 避免在同一代码库中混合使用 null/undefined 检查与 Option - 完全采用 fp-ts 模式以保持一致性
- 不要将 TaskEither 用于同步操作 - 将其保留给可能失败的异步操作，对同步验证使用 Either