Event Base Architecture Using React | by Zafar Saleem | Jun, 2022

How to create an architecture that follows the pub/sub design pattern

Photo by Goran Ivos on Unsplash

There are plenty of ways to architect your React project including using third-party state management libraries Redux, Mobx, etc., or we can use a context API. We can also decide on using pure component-based architecture, i.e., all of the logic is dealt with a component. We can also use React Hooks-based architecture, presentation-container design patterns, etc.

However, today I am going to implement Event Base Architecture where components, hooks etc., and other layers of the architecture can interact with each other via the EventBus layer. This EventBus is designed based on the pub/sub design pattern which is a famous design pattern in which a publisher has several unknown subscribers and it broadcasts an event to all the subscribers listening to that event. Then, they do operations based on the dispatched event.

In this architecture, a component dispatches an event, and the target component listens to that event and calls a callback function when it receives that event.

The following diagram shows the architecture we are going to design and implement in this article:

0*63H1eTFYuhsn MV3

It would be a great idea if we get into the practical project to demonstrate how we can achieve such an architecture. For this, I decided to create a sample project in which we are going to enter contact details and save them in a component state.

It has two components, i.e., Home and Form. These two components interact with each other via EventBus. Thus it allows us to keep them loosely coupled with each other.

Before we get into this article, if you would like to see the code, you can find it on my GitHub profile here.

Now, let’s get into the article. For this to run, type the following command in your terminal:

Give it a few minutes. It will create a folder with the name react-event-architecture. Simply cd into that folder:

Now, open this folder in your favourite editor/IDE. What I will do is first I will implement the basic application with both pages and later start working on the EventBus layer.

First of all, create a new folder with the name of components inside src folder then create two more folders, i.e., Home and Form. Inside Home create Home.js file and inside Form folder, create Form.js file. Now open Form.js in your favorite editor and paste the code below.

In this component, I am simply creating an HTML form with name, email and Number fields and when the user clicks on the `save` button it calls the save function. I will implement this function a little later in this article.

Now, open the Home.js file and paste the following code:

As you can see, it is also a very simple component for now. I am importing the useEffect and useState hooks. Then inside the component, I am creating a local state variable contacts. Inside JSX, I am checking if there are any contacts in the local state variable contacts. If there is nothing, show a message like`No contacts found.`

Now open the App.js file and paste this code:

Here I am importing both Home and Form components and rendering them inside the App component.

Now that we are done with the basic stuff, it is time to get into EventBus which is the gist of this article. Create the EventBus folder inside the src folder and create a file inside that folder with the name EventBus.js. Now, open that file and paste the following code into it:

As you can see, I am exporting an EventBus function and inside this function, I am declaring an eventLists map. Then I am returning the anonymous function and inside that, where I have three functions, i.e., dispatch, listen, and destroy.

The dispatch function is used to trigger an event and the listen function is used to listen to the event that is triggered via the dispatch event. The destroy function simply gets rid of the event.

Now that we have the EventBus layer setup, it is time to use it. Let’s open the App.js file and update your code with the following code:

Lines number 3 and 5 and new lines added to this file. I am importing EventBus and adding the Events property to the global scope, then assigning the EventBus()() function by calling it. After doing that with all the functions inside EventBus, they are available during the entire project.

Now, what we want is to focus on when a user enters details for a new contact and presses the `save` button. When this happens, we will `dispatch` an event. So let’s open Form.js file and update it with the following code:

Lines 5,6,7 and 9 and new lines are added to this file. I am getting name, phone and email from the form after the `save` button is clicked. Then, I dispatch the SAVE event by calling window.Events.dispatch(‘SAVE’, { name, email, phone });.

Now, I am going to listen to that event in the Home.js component where the lists of contacts are saved in a local variable state and then display all these contacts in the form of a table.

Open the Home.js component and paste the following code:

Inside the useEffect hook, I am listening to the SAVE event and then calling the callback function to save the contact and pass the object received from the dispatch function from Form.js component. Inside the saveContact function, I am updating the contacts state with newly added contact from the Form.js component.

Inside JSX, I added a table and rendered all the contacts there, which you see for yourself.

Now that you can add a new contact via Event Base architecture, the next steps would be to implement RUD (Read, Update, Delete) in the CRUD concept. I will leave that to you so you can implement it on your own.

Want to connect?If you would like to chat with me on social media, then please visit my LogRocket profile to find a link to my website.

News Credit

%d bloggers like this: