fp-ts-react
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15.
How to use
Zainstaluj fp-ts w swoim projekcie React: npm install fp-ts. Skill zawiera gotowe wzorce – nie wymaga osobnej instalacji, a raczej pokazuje, jak strukturować kod.
Zapoznaj się z podstawowymi typami: Option dla wartości, które mogą nie istnieć (np. zalogowany użytkownik), Either dla operacji, które mogą się nie powieść (np. walidacja), TaskEither dla asynchronicznych operacji (np. zapytania API).
Zastosuj Option w stanie komponentu zamiast null | undefined. Zdefiniuj stan jako useState<O.Option
>(O.none), a następnie użyj O.match() do obsługi obu przypadków – gdy wartość istnieje i gdy jej brak. Dla walidacji formularzy użyj Either, aby zwrócić albo błędy (Left), albo poprawne dane (Right). Skill pokazuje, jak gromadzić wiele błędów walidacji w jednym miejscu.
W zapytaniach do API zastosuj TaskEither, aby obsłużyć trzy stany: ładowanie, błąd i sukces. Skill zawiera wzorce do wyświetlania komunikatów ładowania i obsługi błędów sieciowych.
Łącz transformacje za pomocą pipe() – funkcja z fp-ts, która pozwala czytać kod od góry do dołu i unika zagnieżdżonych nawiasów.