Представляем новый фреймворк для React / Redux / Redux Saga

Авторы: Арон Рачо и Фрэнк Меза - изначально опубликовано 15 февраля 2019 г.

Ситка - небольшой, но мощный фреймворк для государственного управления. Он организует ваше приложение в модули, каждый из которых управляет логической областью состояния. Он построен на основе Redux и Redux Saga, предоставляя вам все преимущества этих инструментов без использования шаблонов.

Давайте рассмотрим простое приложение-счетчик, сравнивая различия между традиционной реализацией Redux / Redux Saga и реализацией Sitka.

Простое приложение счетчика

В целях иллюстрации мы будем работать с простым приложением счетчика, созданным с использованием TypeScript, состояние которого существует в хранилище Redux и использует Redux Saga для координации своей логики.

В простых приложениях может быть достаточно изменить состояние, вызвав действие, непосредственно потребляемое редуктором Redux. Однако в более крупных приложениях Sagas предлагает полезный механизм для запуска составных операций вокруг одного логического действия, такого как «счетчик приращения». Например, действие приращения может потребовать проверки разрешений, ведения журнала и даже асинхронного доступа к вторичному хранилищу данных перед окончательным вызовом редуктора для изменения состояния.

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

Традиционный способ

Для создания приложения счетчика с использованием TypeScript, Redux и Redux Saga потребуется:

  1. состояние счетчика в Redux
  2. интерфейс для создателя действия приращения
  3. создатель действий, использующий интерфейс
  4. прослушиватель этого действия в индексе саг, перенаправляющий на сагу
  5. селектор для получения текущего состояния счетчика из Redux
  6. Saga, которая обрабатывает полезную нагрузку действия, а также любые другие побочные эффекты приложения, и устанавливает новое значение в состоянии Redux через reducer, используя второй создатель действия Redux
  7. интерфейс для этого создателя действий, ориентированного на редуктор
  8. действие для создателя действий, обращенного к редуктору
  9. редуктор, который слушает создателя действия по установке значения
  10. регистрация редуктора с корневым редуктором

Ниже представлена ​​полностью реализованная реализация этих компонентов:

TypeScript, Redux и Redux-Saga отлично подходят для совместного использования. Вы получаете все преимущества строго типизированной кодовой базы, управления состоянием Redux и прямого потока управления как синхронными, так и асинхронными операциями.

Но, как вы можете видеть из вышесказанного, очевидным недостатком этого стека является то, что для типичного использования требуется много шаблонов! Вот тут-то и пригодится Ситка.

Реализация приложения с помощью Sitka

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

Полное приложение счетчика можно найти здесь, на Github.

moduleName и defaultState устанавливаются внутри класса, и определяется одна функция генератора *handleCounter, которая просто увеличивает счетчик на 1.

Ключевые слова public и private используются, чтобы показать, какие методы класса могут быть вызваны извне самого класса. Подробнее об этой функции TypeScript см. Их справочник по классам. В этом случае getCounter помечен private, так что только CounterModule имеет доступ к своему собственному состоянию.

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

В вашем презентационном компоненте вы могли бы вызвать *handleIncrement вот так:

Генератор handleIncrement, определенный в вашем модуле, заключен в действие, которое создается под капотом, потому что его имя начинается с handle.

Что происходит под капотом

Sitka избавляет вас от написания шаблона за счет автогенерирования кода. Он генерирует:

  • Действие, заключающее каждую функцию генератора
  • Редуктор, поддерживающий метод setState
  • Раздел дерева состояний редукции, определенный атрибутом класса ситки moduleName - в данном случае counter.

Когда следует использовать Ситку

Мы рекомендуем использовать Sitka, если вы собираетесь создать более крупное приложение с использованием машинописного текста и сокращения. Sitka сохраняет ваш код строго типизированным и организованным, уменьшая при этом шаблонную нагрузку, которую можно добавить из-за сокращения и машинописного текста. Меньше набора текста = более быстрое время разработки.

Обновление существующих приложений

Хотя вы можете создать свое приложение с нуля, используя Sitka, оно также разработано для постепенного добавления в существующее приложение Redux. См. Пример добавления Sitka в проект и пример использования с использованием функции connect React-Redux для подключения вашего компонента к Redux на базе Sitka store.

Olio Apps использует Sitka

Мы используем Sitka в живых проектах, и с ней приятно работать. Мы можем воспользоваться всеми преимуществами строго типизированной кодовой базы, а также написать небольшую часть кода, который нам нужен, прежде чем использовать Sitka. Мы в Olio Apps надеемся, что вы попробуете Sitka для управления состоянием в своем следующем проекте или даже для реализации новой функции в существующем проекте.

Olio Apps создает программное обеспечение для веб, мобильных и других платформ. Чтобы читать больше подобных статей, подпишитесь на нашу рассылку.

Первоначально опубликовано на www.olioapps.com.