Паттерн Publish/Subscribe (Публикация/Подписка), туториал: нотификации с react-toastify на шине событий

Паттерн Pub/Sub, по своей природе способствующий уменьшению связности между конкретными модулями системы и вбирающий всю «лишнюю» связность в себя, идельно подходит для реализации системы нотификаций во фронтовых проектах.

Нотификации могут быть разнообразными и отправляться из совершенно разных мест: от общесистемных сообщений из высокоуровневых компонентов до нотификаций о конкретных действиях пользователя в глубинах дочерних компонентов.

Причём часто отправка визуальных нотификаций пользователю сопровождается дополнительными действиями: например, отправкой аналитических логов или сайд-эффектами. При этом импортировать компонент нотификаций (и пробрасывать туда данные) в каждый конкретный компонент, триггерящий появление нотификаций, или же прописывать дополнительную логику внутри этих компонентов — нехорошо (а иногда и невозможно без «костылей»): так компоненты обрастают «сторонней» логикой и хаотичными связями между разными частями системы.

Поэтому выделение отдельной связующей абстракции (шины событий) для упорядочивания взаимодействий внутри системы оправдано. Общение компонентов посредством создания и запуска событий помогает избежать проп-дриллинга и помогает связывать ненапрямую (не увеличивая coupling) совсем разнесённые части одной системы.

В этом туториале мы разберём, как создать шину событий, интегрировать её работу с жизненным циклом React-компонентов, а также применить событийную модель для реализации пользовательских нотификаций с помощью библиотеки react-toastify.