Member-only story
How to Use Event Bus in React Architecture
Let’s create a Remix application
TL;DR
- We’ll write a lightweight Event Bus from scratch in just 60 lines!
- We’ll learn the use case to utilize Event Bus in React best.
- We’ll apply Event Bus in a demo with Google Maps API.
I recently came across an interesting use case of Event Bus at work. It’s a very lean module to organize logging for analytics in a global-scale web application. It creates great clarity in a large code base, so I want to share my case study of this useful design pattern with you.
Let’s go.
What Is An Event Bus?
An Event Bus is a design pattern that allows PubSub-style communication between components while the components remain loosely coupled.
A component can send a message to an Event Bus without knowing where the message is sent to. On the other hand, a component can listen to a message on an Event Bus and decide what to do with the message without knowing where the message comes from. With this design, independent components can communicate without knowing each other.
The visualization looks like this:
- Event: The message being sent and received on an Event Bus.
- Publisher: The sender that emits an event.
- Subscriber: The receiver that listens to an event.
Let’s take a closer look at Event Bus.
Building An Event Bus from Scratch
Inspired by Vue’s legacy Events API, we’ll implement the following APIs for our Event Bus:
on: for a subscriber to listen (subscribe) to an event and register its event handler.
