Анатомия Jotai: создаём современный state-менеджер для React с нуля

Почему важно понимать устройство state-менеджеров

Современная React-разработка немыслима без эффективного управления состоянием приложения. Хотя мы привыкли использовать готовые решения как чёрный ящик, понимание их внутреннего устройства даёт несколько важных преимуществ:

• Более осознанный выбор инструментов для конкретных задач
• Способность эффективно отлаживать проблемы
• Возможность при необходимости создавать кастомные решения
• Глубокое понимание React и принципов управления состоянием

Основные концепции Jotai

Jotai предлагает атомарный подход к управлению состоянием. В его основе лежат несколько ключевых концепций:

1. Атомы как единицы состояния

Атом - это минимальная единица состояния. В отличие от глобального store в Redux, каждый атом существует независимо и может быть создан динамически. Это делает код более модульным и тестируемым.

2. Производные атомы

Производные атомы (derived atoms) позволяют создавать вычисляемые значения на основе других атомов. Это похоже на computed properties в Vue или селекторы в Redux, но реализовано более элегантно.

Пошаговая реализация базового state-менеджера

Шаг 1: Создание базового атома

const createAtom = (initialValue) => {
  let value = initialValue;
  const subscribers = new Set();

  return {
    get: () => value,
    set: (newValue) => {
      value = newValue;
      subscribers.forEach(callback => callback(value));
    },
    subscribe: (callback) => {
      subscribers.add(callback);
      return () => subscribers.delete(callback);
    }
  };
};

Шаг 2: Интеграция с React

const useAtom = (atom) => {
  const [value, setValue] = useState(atom.get());

  useEffect(() => {
    return atom.subscribe((newValue) => setValue(newValue));
  }, [atom]);

  const updateAtom = useCallback(
    (newValue) => atom.set(newValue),
    [atom]
  );

  return [value, updateAtom];
};

Продвинутые возможности

Асинхронные атомы

Одно из главных преимуществ Jotai - элегантная работа с асинхронными данными. Вот как можно реализовать базовую поддержку асинхронности:

const createAsyncAtom = (asyncFn) => {
  const baseAtom = createAtom({ loading: true, data: null, error: null });

  asyncFn()
    .then(data => baseAtom.set({ loading: false, data, error: null }))
    .catch(error => baseAtom.set({ loading: false, data: null, error }));

  return baseAtom;
};

Практические рекомендации по использованию

• Гранулярность атомов: Создавайте атомы для минимальных логически связанных частей состояния
• Композиция: Используйте производные атомы для создания сложной логики
• Производительность: Следите за подписками и отписками от атомов
• Типизация: Используйте TypeScript для добавления типов вашим атомам

Сравнение с другими решениями

В отличие от Redux, Jotai не требует создания единого store и работы с редьюсерами. По сравнению с MobX, он предлагает более простую и прозрачную модель реактивности. Zustand занимает промежуточное положение, но Jotai выигрывает в простоте API и работе с асинхронностью.

Заключение

Понимание внутреннего устройства state-менеджеров - ключевой навык для React-разработчика. Создание собственной реализации помогает лучше понять принципы работы этих инструментов и принимать более взвешенные решения при выборе решений для своих проектов.

Хотите углубить свои знания о state-менеджменте? Подпишитесь на наш блог, где мы регулярно разбираем сложные темы React-разработки и делимся практическими советами.