Глобальное состояние приложения

Глобальное состояние приложения является ключевым элементом архитектуры при работе с компонентами в Slim.js. Slim.js предоставляет легковесные инструменты для управления состоянием и реактивности без необходимости подключения больших фреймворков, что делает подход особенно эффективным для SPA и динамических интерфейсов.

Создание и управление глобальным состоянием

Для организации глобального состояния используется объект, который может быть подписан компонентами. Slim.js не навязывает строго структуру, но рекомендуется создавать отдельный модуль состояния, чтобы избежать тесной связки компонентов и состояния.

// state.js
export const appState = {
    count: 0,
    user: null,
    todos: []
};

Объект appState можно расширять и модифицировать, добавляя новые свойства по мере роста приложения. Главное — сохранять единый источник правды, чтобы компоненты могли подписываться на изменения.

Реактивные свойства

Slim.js позволяет создавать реактивные свойства, которые автоматически обновляют интерфейс при изменении состояния. Для этого используется встроенный метод observe.

import { appState } from './state.js';

Slim.observe(appState, 'count', (newValue, oldValue) => {
    console.log(`Count изменился с ${oldValue} на ${newValue}`);
});

Любое изменение свойства count вызовет функцию обратного вызова. Это позволяет компонентам реагировать на изменения без ручного вмешательства в DOM.

Интеграция глобального состояния в компоненты

Компоненты Slim.js могут подписываться на глобальное состояние с помощью декораторов или методов жизненного цикла. Например, для классовых компонентов:

import { Slim, appState } from './state.js';

class CounterComponent extends Slim {
    get template() {
        return `<div>
                    <span>${this.count}</span>
                    <button oncl ick="increment()">Increment</button>
                </div>`;
    }

    onBeforeMount() {
        Slim.observe(appState, 'count', (newValue) => {
            this.count = newValue;
            this.update();
        });
    }
}

function increment() {
    appState.count += 1;
}

Slim.define('counter-component', CounterComponent);

В этом примере CounterComponent реагирует на изменение глобального состояния count. Метод update() инициирует перерендер компонента только при необходимости.

Организация сложного состояния

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

export const userState = {
    current: null,
    isAuthenticated: false
};

export const todoState = {
    items: [],
    filter: 'all'
};

Каждый модуль можно подписывать независимо, что упрощает управление зависимостями и снижает риск непреднамеренных изменений в других частях приложения.

Методы работы с состоянием

  1. Чтение состояния — напрямую через свойства объекта состояния.
  2. Изменение состояния — через прямое присвоение или через вспомогательные функции:
export function addTodo(item) {
    appState.todos.push(item);
    Slim.notify(appState, 'todos');
}
  1. Подписка на изменения — через Slim.observe, позволяющее компонентам автоматически обновляться при изменении данных.
  2. Уведомление подписчиков — через Slim.notify, если требуется оповестить компоненты вручную после сложных операций.

Преимущества подхода

  • Лёгкость и минимализм — нет лишнего кода для управления состоянием.
  • Реактивность — автоматическое обновление интерфейса при изменении данных.
  • Модульность — возможность делить состояние на отдельные независимые части.
  • Контролируемые побочные эффекты — компоненты реагируют только на нужные изменения.

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

  • Использовать единый объект состояния для критически важных данных приложения.
  • Подписывать компоненты только на необходимые свойства, чтобы снизить нагрузку на перерендер.
  • Для асинхронных операций состояния применять вспомогательные методы, которые изменяют данные и уведомляют подписчиков.
  • Разделять глобальное состояние и локальное состояние компонента для упрощения тестирования и поддержки.

Пример комплексного глобального состояния

export const appState = {
    user: { name: '', role: '' },
    notifications: [],
    todos: [],
    settings: { theme: 'light', language: 'ru' }
};

// Подписка на изменения темы
Slim.observe(appState.settings, 'theme', (newTheme) => {
    document.body.setAttribute('data-theme', newTheme);
});

В этом примере глобальное состояние охватывает сразу несколько аспектов приложения: пользователя, уведомления, задачи и настройки интерфейса. Подписка на изменение темы позволяет динамически менять внешний вид приложения без вмешательства в отдельные компоненты.

Глобальное состояние в Slim.js становится центральной точкой управления данными, обеспечивая согласованность интерфейса, реактивность и масштабируемость.

Оглавление