fp-ts-react

Praktyczne rozwiązania do pracy z fp-ts w React. Naucz się obsługiwać stany ładowania, błędy i walidację formularzy za pomocą typów funkcyjnych takich jak Option, Either i TaskEither. Skill zawiera gotowe wzorce dla React 18/19 i Next.js 14/15, które eliminują null/undefined i sprawiają, że obsługa błędów staje się jawna i bezpieczna. Idealne, gdy chcesz pisać kod bardziej przewidywalny i łatwiejszy do testowania.

1. 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.

2. 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).

3. 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.

4. 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.

5. 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.

6. Łą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.