Эффектор в практических задачах

и немного других рассуждений

Немного назад
Люди всё время что-то
нажимают, а фронтенды всё
время реагируют
События

События
Фронтенд
События

События

События (сообщение, что где-то что-то случилось) > Фронтенд

 Реакция Реакция
События

События
Фронтенд
События

События

Реакция
Реакция

События (действия пользователя, ответы API) > Фронтенд > Реакция (Отрисовка UI, запросы к API и т.д.)
 Реакция Реакция
События

Фронтенд События

выбирает реакцию
согласно бизнес-логике
События

События

Реакция
Реакция

Выбираем следующую реакцию на события согласно бизнес-логике

 Реакция Реакция
События
(источник информации)

Фронтенд
запоминает историю События
событий, копит знания (источник информации)

выбирает реакцию
События согласно бизнес-логике
(источник информации)
События
(источник информации)

Реакция
Реакция

Состояние - вся информация, которую фронтенд накопил за время своей активной работы
 Реакция Реакция
События
(источник информации)

Фронтенд
запоминает данные из
событий и делает из них События
более осмысленные (источник информации)
значения, а затем
выбирает реакцию
События
(источник информации) согласно бизнес-логике
События
(источник информации)

Реакция
Реакция

Состояние - набор значений и условий, нужных при выборе следующей реакции

Сырые данные
Значение, важное для бизнес-логики

Правило

Комбинация - трансформация одних данные в другие по какому-либо правилу

 Другие вычисления,
Условие условия или запуск реакций
Ветка 2

Ветка 1

Другие вычисления,
условия или запуск реакций

Ветвление по условию - имеем вводные данные, по правилу решаем, что делать дальше
Мы имеем дело с живой
системой - пользователь всё
время генерирует события, с
этим тоже нужно справляться
 Другие вычисления,
Условие условия или запуск реакций
Ветка 2

Ветка 1
Любое
событие как
триггер
вычислений

Другие вычисления,
условия или запуск реакций

Запуск по событию - начинаем вычислять по любому нужному нам сигналу, а не только при
новых данных

Стейт-менеджеры
Специальные инструменты,
помогающие нам справиться со
всем этим
Наши потребности:
1. Обработка разнообразных
событий
2. Вычисление состояния, иногда
по сложным правилам
3. В зависимости от событий и
состояния, в соответствии с
бизнес-логикой, нужно
выполнять определенные сайд-
эффекты

Стейт-менеджеры
Специальные инструменты,
помогающие нам справиться со
всем этим
Наши потребности:
1. Обработка разнообразных
событий
2. Вычисление состояния, иногда
по сложным правилам
3. В зависимости от событий и
состояния, в соответствии с
бизнес-логикой, нужно
выполнять определенные сайд-
эффекты
4. Удержать всё это в голове
Effector - Event
Effector - Store
Effector - watch
Effector - Effect
Effector - Операторы
Effector - Операторы
Effector - Операторы
Effector - Операторы
Декларативность
 Data UI
Декларативное
описание

Декларативность - “что” в итоге, без конкретных инструкций “как”

 Data UI
Декларативное
описание

Но только для интерфейсов

Декларативность - “что” в итоге, без конкретных инструкций “как”
Практика!
И как эффектор нам с ней помогает
Как пользователь, я:

1. Обязан задать почту и пароль

2. Обязан принять условия пользования
3. Могу отправить почту и пароль в любой
момент, как только посчитаю что они
верны и готовы и, тем самым,
зарегистрироваться в системе Допустим, интерфейс будет такой
● Не могу зарегистрироваться, не приняв
условия
● Не могу зарегистрироваться, если такая
почта уже есть в системе

Типовая форма регистрации

Форма
Сабмит
Проверка условий
Сабмит
Обработка ошибок
Обработка ошибок
Обработка ошибок
 Ошибка

Почта

Бэкенд
Форма Валидация

Пароль

Сабмит
Согласие

Примерно такая схема у нас возникает

Привязываем к интерфейсу
Поиграть с примером в
Effector-REPL:
https://share.effector.dev/PDlT2WGL
Как пользователь, я
1. Могу посмотреть, что сегодня в
меню
2. Могу выбрать несколько блюд
себе в заказ
3. Могу оформить заказ, как буду
готов
Не могу оформить заказ, если не
набрал минимальную сумму
В случае, ошибки на стороне
ресторана могу поменять заказ без
ограничения на минимальную сумму Допустим, интерфейс будет такой

Закажем еду
Заведем эффекты под работу с API
Заведем сторы под список блюд и корзину заказа
Заведем события корзины
Обработаем заказ
Успех!
Обработаем ошибку
Поиграть с примером в
Effector-REPL:
https://share.effector.dev/H7OFwMpi
Мир фронтенда - Event-Driven,
а бизнес-правила - декларативны

С этим надо как-то справляться и наши

инструменты должны нам в этом
помогать
Конец доклада
Telegram: @AlexandrHoroshih