ПОСТРОЕНИЕ REACT ВЕБ-ПРИЛОЖЕНИЯ НА ОСНОВЕ ШАБЛОНА ПРОЕКТИРОВАНИЯ ИЗДАТЕЛЬ-ПОДПИСЧИК

BUILDING A REACT WEB APPLICATION BASED ON PUBLISH-SUBSCRIBE DESIGN PATTERN

Maxim Beryanov

student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

Связывание компонентов друг с другом является неотъемлемой частью современного динамического приложения. Как альтернатива разнообразным способам хранения и использования состояний в React, в данной статье будет рассмотрено внедрение использования событий через шаблон проектирования «издатель-подписчик».

ABSTRACT

Connecting components to each other is an integral part of any modern dynamic application. As an alternative to React various ways of storing and using states, this article will consider implementing events usage through the “publish-subscribe” design pattern.

Ключевые слова: React, событие, шаблон проектирования, mitt.

Keywords: React, event, design pattern, mitt.

«Издатель-подписчик» [1] – поведенческий шаблон проектирования передачи сообщений (событий), в котором отправители сообщений, именуемые издателями, напрямую не связаны программным кодом отправки сообщений со своими подписчикам. Вместо этого сообщения маркируются темой и не содержат сведений о своих подписчиках, если таковые есть. Аналогичным образом подписчики имеют дело с некоторыми определенными тематическими сообщениями, абстрагируясь от конкретных издателей. Этот шаблон представляет собой расширение шаблона «наблюдатель», в который добавлено описание канала событий, специально предназначенного для обработки оповещений о событиях.

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

• Многоразовой – один и тот же слушатель может быть вызван из любого места в приложении, не нужно писать дублирующую логику;
• Легко поддерживаемой – новые компоненты можно быстро создавать вместе с запуском определенного события, даже если эти компоненты организованы в удаленных друг от друга местах в коде веб-приложения;
• Не предрасположенной к ошибкам – язык TypeScript [2], благодаря типизации, позволяет выполнять только релевантные события, то есть те события, которые ожидаются.

Несомненно, в контексте языка TypeScript уже существует несколько легковесных библиотек для создания канала событий. В данной статье предлагается использовать инструмент Mitt [3], ввиду того что он очень мало весит вследствие отсутствия зависимостей. Установить его можно командой npm install mitt. В данной библиотеке (как и в общем подходе) существуют только две важные функции: запуск события и прослушивание события (рисунок 1). Однако, простого проектирования кода как на представленном рисунке всё ещё недостаточно – нам нужно убедиться, что emitter (тот же самый экземпляр) доступен из любого места в приложении. Если мы просто вызовем ‘const emitter = mitt()’ в каждом компоненте, это будет новый экземпляр канала событий, что влечет в ситуацию, когда события могут не приходить так, как было задумано разработчиком.

Рисунок 1. Использование библиотеки mitt

Как правило, глобальное состояние сложно реализовать в React [4] – нам нужно либо обращаться к весьма тяжеловесному фреймворку вроде Redux, либо транслировать параметры в качестве свойств и обратных вызовов. Главное предупреждение – не пытаться передавать emitter в качестве свойства дочернему React-компоненту – он не будет правильно обновляться, поскольку новые компоненты добавляют себя в качестве слушателей, что ведет к странным и непредвиденным ошибкам. Чтобы решить эту проблему, нам нужно сделать один экземпляр канала событий глобальным. Самый простой способ сделать это — добавить его в объект Window. Теперь мы можем просто взять emitter из любого компонента, чтобы зарегистрировать новых слушателей или сгенерировать событие (рисунок 2).

Чтобы значительно увеличить скорость написания кода и заранее устранить возможные ошибки, используем типизацию TypeScript, определяя валидные события для канала событий (рисунок 3). Затем мы можем использовать автозаполнение в IDE (к примеру, в VS Code или IntelliJ IDEA), чтобы убедиться, что мы используем только существующие события – тем самым мы более не допускаем никаких ошибок при написании частей кода, связанных с событиями.

Рисунок 2. Глобальный emitter

Рисунок 3. Типизация событий

Таким образом, внедрение канала событий в React допускает слабосвязанные компоненты, повышая возможность повторного использования кода и уменьшая количество ошибок, благодаря использованию TypeScript и автозаполнению в IDE.

Список литературы:

1. Издатель-подписчик [Электронный ресурс] URL: https://pro-prof.com/archives/2400 (дата обращения: 09.12.2022).
2. TypeScript [Электронный ресурс] URL: https://www.typescriptlang.org (дата обращения: 09.12.2022).
3. Mitt [Электронный ресурс] URL: https://www.npmjs.com/package/mitt (дата обращения: 09.12.2022).
4. React [Электронный ресурс] URL: https://reactjs.org (дата обращения: 09.12.2022).