Живое состояние ванн: от console.log к реальным callbacks в React

Работал над SCADA Coating — системой мониторинга и управления промышленными ванами с покрытием. Проект на React, и сейчас нужно было превратить статический макет в живую панель управления.

Задача звучала просто: добавить callback props в EquipmentView и LineView, затем подключить все кнопки к реальным обработчикам вместо console.log. На практике это означало переложить состояние ванн из статического импорта в useState и синхронизировать изменения между тремя вкладками одновременно.

Кнопки, которые работают

Начал с таблицы ванн в EquipmentView. Здесь каждая строка — одна ванна с индикатором температуры, статусом нагрева и положением крышки. Две кнопки: переключение нагрева (ВКЛ/ВЫКЛ) и управление крышкой (ЗАКР/ОТКР). Каждая должна мгновенно обновить интерфейс и синхронизироваться со всеми остальными вкладками.

Потом добавил GroupControlBar — панель для массового управления. Здесь уже интереснее. Кнопки “ВСЕ ВКЛ” и “ВСЕ ВЫКЛ” для нагрева работают мгновенно — все 28 ванн переключаются разом. Но для открытия/закрытия крышек я выбрал другой подход: каждая крышка отчитывается через ~400 мс, одна за другой. Команда не блокируется, пользователь видит прогресс в реальном времени.

“ЗАПУСТИТЬ ДОЛИВ” работает ещё интереснее — ванны ниже 70% наполняются постепенно (5 шагов по ~250 мс каждый) с задержкой между ваннами. Это имитирует реальное поведение: не все устройства отзываются мгновенно, оборудование может быть неисправно, и система должна это выдержать.

Асинхронность без блокировок

Ключевой момент — неблокирующая модель. Когда пользователь нажимает кнопку дважды подряд, предыдущая операция отменяется через clearTimeout. Это критично для UX: команды не скапливаются в очереди, система остаётся отзывчивой.

Sidebar на вкладке “Линия” подключен к тому же состоянию — нагрев, крышка, мешалка. Изменения на одной вкладке видны везде.

Факт о React и управлении состоянием

Интересный момент: в больших Electron-приложениях и SCADA-системах часто используют глобальное состояние через Context API или Redux, чтобы синхронизировать данные между компонентами. Но для относительно небольших систем (28 ванн, несколько десятков параметров) обычный useState в родительском компоненте работает быстрее и требует меньше boilerplate. Главное — корректно структурировать callback props и избегать глубокой вложенности.

Теперь панель управления действительно живая: всё отзывается, состояние синхронизируется, и каждая команда имитирует реальное поведение оборудования.

😄 Кстати, что общего у Emacs и кота? Оба делают только то, что хотят, и игнорируют инструкции.