Эффектор - государственный менеджер, стоит попробовать

Эй, ребята! Я знаю, что от меня не было сообщений около года или больше. В этом году я был трудолюбивым и много учился, мое мнение изменилось (да, сейчас я использую React 😃)

Сегодня я хочу поделиться библиотекой, которую открыл полгода назад, и она мне очень понравилась!

Это Effector - менеджер состояний приложения, который как нельзя лучше соответствует моему взгляду на организацию бизнес-логики.

Итак, начнем с идеи, а затем я покажу простой пример.

Основные концепции

• Децентрализованные магазины ›монолитный магазин
  Гораздо проще иметь дело с простыми магазинами, а затем объединять их в формы, а не разделять огромный магазин на части.
• Магазины должны быть максимально простыми
  Не пугайтесь идеи добавления еще одного магазина в свое рабочее приложение.
• Интуитивный API
  Небольшое количество базовых принципов повторно используется в разных случаях, уменьшая порог входа. Если вы знаете, как .watch работает в событиях, вы, вероятно, уже знаете, что .watch делает в магазинах и т. Д.
• Переместите бизнес-логику за пределы представления
  Пусть компоненты будут простыми, как в примере «Начало работы», пока Effector работает с бизнес-логикой.
• Предусмотрено исключение проблем с производительностью
  Effector предназначен для уведомления только тех, кто подлежит изменению. Это гарантирует, что ваше приложение не будет внезапно повторно отрисовано из-за незначительного изменения состояния.
• Никаких зависимостей, независимость от фреймворка
  Effector не зависит от React, RxJS или чего-то еще. Он использует только наблюдаемые символы полифилы, чтобы быть совместимыми с наблюдаемыми

Начать работу с приложением Todo

Нам нравятся todos, правда? Итак, давайте сделаем несколько магазинов.
Я не буду вдаваться в подробности, но буду держать вас в курсе того, что мы здесь используем.

Перед запуском устанавливаем эффектор:

npm install effector effector-react
# or
yarn add effector effector-react

Для создания магазинов используйте функцию createStore. 1-й аргумент - это начальное значение.
Вы также можете создать вычисленные хранилища, используя метод store.map(cb).

Как изменить состояние магазина? Эффектор использует для этого события
Чтобы создать событие, используйте createEvent функцию:

И для этого примера нам понадобится еще одна вещь - обработать отправку формы.
Я добавил еще одно событие, и в конце кода вы можете увидеть еще одного наблюдателя

Итак, наш слой бизнес-логики готов. Время для просмотра:

На этом пока все, что нужно сделать, потому что я хочу оставить его простым.
Этот пример в Codesandbox: щелкните здесь

Что еще?

Объединение магазинов

Конечно, вам нужно объединить магазины в формы или сделать какое-то нестандартное комбинирование.

Для этого у Effector есть combine

Пример:

Эффекты

Для побочных эффектов, таких как получение данных, у Effector есть эффекты

• Эффекты похожи на события, но у них также есть .use(cb) метод, который вызывается по вызову.
• Эффект также имеет события effect.done и effect.fail.

Пример:

Преобразование наблюдаемых в события

Я не фанат RX, но если хотите, вы можете использовать fromObservable помощник для преобразования наблюдаемых в события

Спасибо, что прочитали эту статью. В будущем я хотел бы написать серию сообщений с примерами решения проблем с помощью Effector.
Но если вы меня знаете, лучше не буду давать обещаний 😄

Сайт проекта: https://effector.now.sh
Проект GitHub: https://github.com/zerobias/effector