Вебинар по MobX

Цель

• Познакомить слушателей с MobX, сравнить его с Redux и развеять мифы
• Рассмотреть с практической точки зрения использование MobX в проекте

Введение

• Redux хорошо известен своей понятностью и простотой для интеграции в проект
• MobX часто критикуется за «магичность», но также является хорошим вариантом для управления состоянием

Начало

• Проект: простой сайт «Мой кошелек»
• Технологии: React, Ant Design, Firebase
• Проблема: данные не обновляются без перезагрузки страницы

Краткий обзор проекта

• Список карточек и история операций
• Проблемы с обновлением данных без перезагрузки страницы

Подключение MobX

1. Создание стора
   • Пишем классы для данных: cardsStore, operationsStore
   • Объявляем наблюдаемые свойства и методы (добавление, обновление, удаление элементов)
2. Конфигурация MobX
   • Использование makeAutoObservable для автоматического объявления наблюдаемых свойств и методов
   • Оборачивание компонентов в observer для отслеживания изменений
3. Внедрение в проект
   • Замена локального состояния на MobX-store для cards и operations
   • Обработка методов создания, обновления и удаления элементов через store

Работа с состоянием и дебаггинг

• Методы для отладки: trace, spy, mobx-logger
• Описание процесса наблюдения и оповещения компонентов

Actions

• Дают возможность батчить все изменения и логировать их
• makeAutoObservable автоматически помечает свойства и методы как observable и action
• Важно: операции должны выполняться в экшенах, особенно асинхронные функции

Компьютерные (вычисляемые) свойства

• Пример с сортировкой карточек
• Кэширование вычисляемых свойств и оптимизация рендеринга
• Правила для computed свойств: не изменять наблюдаемые свойства, не выполнять сайд-эффекты, не зависеть от ненаблюдаемых значений

Реакции (Reactions)

• Различные виды реакций (autorun, reaction, when)
• Принципы работы реакций: наблюдение за свойствами через геттеры и уведомление об изменениях через сеттеры
• Важно: observer оборачивает компонент в React.memo для оптимизации рендеринга

Разделение логики

• Распределение логики UI и бизнес-логики
• Использование OOP для написания бизнес-логики, что позволяет гибко управлять иерархией классов

Сравнение с Redux

• Redux: один глобальный стор, простые объекты, иммутабельность данных, понятная архитектура, time travel и devtools
• MobX: множество стояров, наблюдаемые объекты, возможность мутировать данные, меньше кода (бойлерплейта), производительность из коробки
• Выбор зависит от нужд проекта и предпочтений команды

Заключение и рекомендации

• MobX может быть использован для улучшения производительности и уменьшения объема кода
• Redux подходит для проектов, требующих строгой архитектуры и возможностей time travel
• Рекомендуется пройти дополнительные курсы и почитать документацию для углубленного понимания

Вопросы и ответы

• Обсуждение различных аспектов и вопросов слушателей

Рекомендации по обучению

• Курс по веб-разработке от Karpoff Course
• Дополнительные ресурсы для изучения MobX и его внутренней работы