Менеджер состояний

Mind.js представляет собой библиотеку для управления состоянием и реактивного программирования в JavaScript. Центральной концепцией является менеджер состояний, который позволяет хранить, отслеживать и изменять данные приложения в структурированном виде. В основе работы лежат наблюдаемые объекты и подписки на изменения, что делает возможным построение динамических интерфейсов без необходимости вручную управлять обновлениями DOM.

Создание и регистрация состояний

Состояния создаются с помощью функции createState. Она принимает начальное значение и возвращает объект состояния:

const count = createState(0);
  • Начальное значение может быть любым — числом, строкой, объектом, массивом.
  • Созданное состояние автоматически становится наблюдаемым: любые изменения его значения могут быть отслежены через подписки.

Для группировки нескольких состояний используется стейт-менеджер:

const appState = new Mind.StateManager({
    count: createState(0),
    user: createState({ name: 'Алексей', loggedIn: false })
});

Ключевые моменты:

  • Состояния внутри менеджера можно изменять через объект appState.states.
  • Все состояния из менеджера автоматически наследуют возможности реактивного обновления.

Чтение и изменение состояния

Состояние читается напрямую через свойство .value:

console.log(count.value); // 0

Изменение значения выполняется также через .value:

count.value += 1;

Для объектов и массивов предусмотрены методы update, позволяющие безопасно изменять структуру данных:

appState.states.user.update(user => {
    user.loggedIn = true;
});
  • Использование метода update обеспечивает корректное уведомление всех подписчиков о произошедших изменениях.
  • Прямое присвоение вложенных значений без update может не вызвать реакцию подписчиков.

Подписки на изменения

Подписки создаются с помощью метода .subscribe:

count.subscribe(newValue => {
    console.log('Новое значение:', newValue);
});

Особенности подписки:

  • Вызывается каждый раз при изменении значения состояния.
  • Можно создавать подписки на отдельные состояния или на всю группу состояний менеджера.
  • Подписка возвращает функцию для отписки:
const unsubscribe = count.subscribe(value => console.log(value));
unsubscribe(); // прекращает отслеживание изменений

Реактивные вычисления и derived states

Mind.js поддерживает вычисляемые состояния, которые автоматически обновляются при изменении зависимых состояний:

const doubleCount = createDerivedState(() => count.value * 2);
doubleCount.subscribe(value => console.log('Двойное значение:', value));
  • createDerivedState принимает функцию, возвращающую вычисленное значение.
  • Любое изменение зависимых состояний автоматически пересчитывает derived state.

Интеграция с компонентами

Состояния Mind.js легко интегрируются с компонентной архитектурой, например с React или Vue. В React это реализуется через подписку на изменение состояния внутри эффекта:

useEffect(() => {
    const unsubscribe = count.subscribe(setCount);
    return () => unsubscribe();
}, []);
  • Использование .subscribe внутри жизненного цикла компонента обеспечивает синхронизацию интерфейса с состоянием.
  • Derived states можно напрямую использовать для вычисления props компонента без дополнительного рендера.

Организация больших приложений

Для масштабных приложений рекомендуется:

  1. Разделять состояния по модулям:

    const authState = new Mind.StateManager({ user: createState(null) });
const cartState = new Mind.StateManager({ items: createState([]) });

  2. Использовать derived states для вычислений, минимизируя прямую логику в компонентах.

  3. Групповые подписки на менеджер состояний, чтобы отслеживать глобальные изменения:

appState.subscribe(states => {
    console.log('Изменения в состоянии приложения:', states);
});
  • Это упрощает управление реакциями на изменения и снижает количество индивидуальных подписок.

Практические рекомендации

  • Избегать глубокого вложенного присвоения без update.
  • Для массивов использовать методы push, splice через update.
  • Для сложных вычислений использовать derived states вместо вычислений внутри подписок.
  • Регулярно очищать подписки при уничтожении компонентов, чтобы избежать утечек памяти.

Mind.js обеспечивает гибкую реактивную архитектуру, где менеджер состояний становится центром управления данными приложения, а подписки и derived states позволяют поддерживать актуальность интерфейса без избыточного кода. Такой подход упрощает масштабирование и поддержку больших проектов.

Оглавление