Alerts system in react and redux

This post is originally on my blog as Alerts systems are a part of every web application. Check out my article on how to make a simple alerts system on React and Redux for your application ! https://easyontheweb.com/creating-simple-alerts-with-react-and-redux/

Alerts are a part of nearly every web application that you would ever design. They are great to show on the screen for a few moments (or till an action) and convey your message in a simple and subtle way. In this article I’ll show you how would we create a simple alerts system for your React and Redux frontend.

The overview
First things first, ask yourself when do you want to show an alert box on the screen ? It may be upon successful login, maybe for a successful deletion or maybe for any other reason that you’d like. In broader terms there maybe be successful alerts, informative alerts or danger alerts.

How do we gone implementing the alerts system in React and Redux ? Well, we’ll need five parts of our application to co-ordinate in order to achieve this :-

1. The actual Alert component that would come on the screen with your message.
2. The App component (or whatever you have named your root component) where the Alert component will be rendered. 3.The alerts action file where we will create the actions for the alert system. 4.The alerts reducer to, well, tell the state that there is an alert for the application to show. 5.Component X -> where X is any component you want to call an alert from.

The working flow
So, how would this system work an co-ordinate between these five parts that I mentioned before? Let us see how that would work. We’ll take a random example of logging in.

So, there is most probably a component called Login where we want to call an alert from upon successful login of the user. So, what we will do is import our action from the alerts action file into the Login component. There, on the submission of the login form, we will call a setAlert function that we have kept in our alerts actions. This setAlert function will then change the state of the application in the alerts reducer.

As soon as that state is changed, the Alert component which is being rendered by the App component is constantly listening for any state change in the redux store gets to know that the state has changed for the alerts and it starts showing the message and renders itself.

The alert component

Sorry for the syntax highlighting being off, will look to fix it the next time a React component code snippet is shown. Anyways, the main things in this component are that :-

In the mapStateToProps, it is listening to the state.alert property of the state, on any change in that.
It renders null when there is nothing in the state.alert and renders the HTML only when the state.alert exists with a length greater than 0.
Note that the alerts is an array in case there need to be more than one alert on the screen at the same time.

The setAlert action

This is a simple action that takes in a message (to be displayed), a type (success, danger etc.) and a timeout (for how many seconds shall the alert be displayed).

There are two action types being imported here -> SET_ALERT and REMOVE_ALERT. The REMOVE_ALERT type gets dispatched after the completion of the timeout time that was given as the parameter. One weird thing that you might have noticed here is the import of the uuid library, if you are not familiar with the uuid library it does nothing but generate a random id. Here, it is of great use because we are associating an id with each alert. Why ? So as to remove exactly that alert after the timeout gets over and not all the alerts !

The alerts reducer

This is the simplest reducer you are ever likely to see with just two cases – one where we append the payload to an array with the initial state and one where we filter that state array removing the payload that we sent.

I’m going to leave this one to your understanding of how this is working. Feel free to comment or reach out to me in case you don’t get anything.

The App and the call

I’ve pasted such a long snippet of code just to make the clear the position where the component is being rendered. It is inside the container section but is still outside the so as to show up on any page that it wants!

Now, the only thing left is to call the setAlert function from anywhere you’d like. Just import it into your component / action and just call it from anywhere giving your parameters and you’ll have an alert box appearing on your screen !

PS – Please check out Brad Traversy’s node course which was an inspiration for this post.

Would like to know the best resources to learn or extend your knowledge of react -> https://easyontheweb.com/reactjs-resources-for-beginners-from-scratch/