Налаштування State Management (Jotai) для React-застосунку

Настройка State Management (Jotai) для React-додатку

Jotai будує estado з атомів — маленьких ізольованих одиниць, які можна комбінувати. Найближча аналогія — Recoil, але без boilerplate та з кращою підтримкою TypeScript з коробки. Компонент підписується тільки на ті атоми, які читає, та ре-рендерится тільки при їх змінені.

Добре підходить для додатків з великою кількістю незалежних кусків estado: форм, UI-estado, кеш запитів.

Що входить у роботу

Настройка атомарної структури estado під проект: базові атоми, похідні атоми, async атоми, інтеграція з React Suspense, підключення devtools, організація файлів.

Встановлення

npm install jotai
# опціонально — утиліти
npm install jotai-devtools

Базові атоми

import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'

// примітивний атом
export const countAtom = atom(0)

// похідний атом (readonly)
export const doubleCountAtom = atom((get) => get(countAtom) * 2)

// похідний атом з записом
export const incrementAtom = atom(
  (get) => get(countAtom),
  (get, set, step: number = 1) => set(countAtom, get(countAtom) + step)
)

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  const double = useAtomValue(doubleCountAtom)
  const increment = useSetAtom(incrementAtom)

  return (
    <div>
      <span>{count} (×2 = {double})</span>
      <button onClick={() => increment(1)}>+1</button>
      <button onClick={() => setCount(0)}>Скид</button>
    </div>
  )
}

useAtomValue — підписка тільки на чтення, не повертає сеттер. useSetAtom — тільки сеттер, компонент не ре-рендерится при змінені атому.

Async атоми та Suspense

import { atom } from 'jotai'

const userIdAtom = atom<number | null>(null)

// async похідний атом
export const userAtom = atom(async (get) => {
  const id = get(userIdAtom)
  if (!id) return null
  const res = await fetch(`/api/users/${id}`)
  if (!res.ok) throw new Error('Користувач не знайден')
  return res.json() as Promise<User>
})

// Компонент обгорнений в Suspense
function UserProfile() {
  const user = useAtomValue(userAtom) // suspend до завантаження
  if (!user) return <p>Виберіть користувача</p>
  return <p>{user.name}</p>
}

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <ErrorBoundary fallback={<Error />}>
        <UserProfile />
      </ErrorBoundary>
    </Suspense>
  )
}

Терміни

Базова настройка Jotai — 1–2 години. Інтеграція async атомів з Suspense — 2–3 години. Складне дерево estado з похідними атомами — 1 день.