fp-ts-react

fp-ts-react - React 函数式编程实用模式

技能概述

在 React 应用中使用 fp-ts 进行类型安全的函数式编程，涵盖状态管理、表单验证、数据获取等实用模式。

适用场景

需要类型安全的状态管理

当使用 React 18/19 或 Next.js 14/15 构建应用时，需要用 Option 替代 null/undefined、用 Either 处理验证错误、用 RemoteData 管理异步状态，避免运行时类型错误。

需要累积显示表单验证错误

当表单需要同时显示所有字段的验证错误，而不是遇到第一个错误就停止时，使用 Either 的 ApplicativeValidation 可以优雅地收集所有错误信息。

需要明确的异步状态处理

当厌倦了 data/loading/error 的布尔值组合（可能导致不可能状态），需要使用 RemoteData 这种状态机模式来确保只有 NotAsked/Loading/Failure/Success 四种明确状态时。

核心功能

类型安全的状态模式

提供 Option（可能缺失的值）、Either（可能失败的操作）、TaskEither（可能失败的异步操作）等类型安全模式，让 React 组件的状态意图更清晰，避免 null/undefined 带来的运行时错误。

表单验证错误累积

使用 Either 的验证应用式模式，可以在表单提交时收集所有字段的验证错误，而不是只显示第一个错误，大幅提升用户体验。

RemoteData 异步状态管理

用状态机替代传统的 data/loading/error 组合，确保只有四种合法状态，杜绝"有数据但 loading 为 true"这种不可能状态，让异步状态管理更可靠。

常见问题

fp-ts 在 React 中有什么用？

fp-ts 提供了 Option、Either、TaskEither 等类型安全模式，可以替代 React 中常见的 null/undefined 检查和 try-catch 错误处理。例如用 Option 表示可能不存在的用户数据，用 Either 处理表单验证，用 RemoteData 管理 API 请求状态，让代码意图更清晰，运行时更安全。

React 表单验证如何显示所有错误？

使用 Either 的 ApplicativeValidation 模式。传统验证遇到第一个错误就返回，而 fp-ts 的 sequenceS 可以并行执行所有验证，把每个字段的错误收集到一个数组里。这样用户可以一次性看到所有需要修正的地方，而不是改一个提交一次再发现下一个错误。

RemoteData 模式比 loading/error/data 好在哪？

传统的 data/loading/error 三个布尔值或可选值组合可能导致不可能状态，比如"既有数据又有错误"或"loading 为 true 但也有数据"。RemoteData 是一个状态机，只能是 NotAsked、Loading、Failure、Success 四种状态之一，从类型层面杜绝了不可能状态。这让异步状态的 UI 渲染逻辑更简单、更不容易出 bug。