Deep dive into React and Redux ecosystem

Introduction

Well, today we are going to explore a little bit more on React and Redux. In this article I assume that you have some good prior knowledge and experience in React and Redux landscape. If not I recommend you to go through my previous article on introduction to React and Redux ecosystem [1] or any other beginner level training programme.


Prerequisites 

  • Solid understanding about React and Redux technologies.
  • Good knowledge of Javascript, HTML and CSS.

Workshop

Let’s get into this now. The application that we are going to build today is a Count Down Timer application. Our app should allow the user to enter a number of hours, minutes and seconds, then click on Add button, and then the timer will count down from that time. Timer should display hours, minutes and seconds. The user should be able to click a + button on the page to add a new timer. The user should be able to enter a label for the timer, such as "boil eggs," which is displayed with the timer. The user may add as many timers as desired and run them all at the same time. Timers may all have a different value – for example, one timer might go for 10 minutes, while another timer goes for five minutes. There is no limit to the number of timers a user may add. When the timer finishes, play a sound of your choice. Each timer will have a pause button that allows the countdown to be temporarily suspended. When clicked, the text changes to "Resume," and the timer may be resumed by clicking it. Also, timers have a delete button to enable you to delete them. Apart from that the user should be able to Reset the timer, so it starts from the scratch again. Check out the following scaffolding of the UI frame of the app we are going to build today. You may find the working source code for the entire app here [2]. Please make sure you don’t send any pull requests to this code since it is a demonstration.





Let me first start this from the input form which is used to capture user input for a timer. The code is listed down below.


Next let’s take a look at the action creator file for all the user interactions with our single page web app.


The action will then flow through our reducer which manipulates our application level state. Here comes the reducer.


Finally when it comes to rendering timers, there is a smart data component which is responsible for that. Here is the code listing for that parent component.


The countdown timer component which is responsible for representing one single timer in our app looks like this. Also note that, this child component is rendered into the DOM by the above listed parent component. This is just a dumb presentational component which merely renders whatever the information that is passed into it.


If you need any clarification about the code listed above please post those questions below so that I can explain them further to you.

Conclusion

Well, that was a blast. We covered a lot of ground in React and Redux landscape this time. Also note that I didn’t explain all the listing of code in detail, assuming that the reader is an advanced React developer with good understanding of React, Redux, Javascript and CSS. If you are a beginner, I recommend you to go through one of the beginner courses or my previous introductory blog posts associated with React and Redux before getting into this. That does it for the advanced React and Redux session and I’ll see you in my next blog post.

References

[1] http://ravindraranwala.blogspot.com/2017/04/an-introduction-to-react-redux-ecosystem_5.html
[2]  https://github.com/ravindraranwala/countdowntimerapp


Comments

Popular posts from this blog

WSO2 ESB Worker Manager Cluster without a Load Balancer

XML to XML transformation via Smooks Mediator in WSO2 ESB

JMS 2.0 Support in WSO2 ESB