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

Post a Comment

Popular posts from this blog

Introducing Java Reactive Extentions in to a SpringBoot Micro Service

Image
Introduction Today we are going to take a look at Reactive Programming using Java8 and RxJava, which is a library for composing asynchronous and event-based programs by using observable sequences. RxJava stands for Reactive Extensions for the JVM. It extends the observer pattern [Gamma95] to support sequences of data/events and adds operators that allow you to compose sequences together declaratively while abstracting away concerns about things like low-level threading, synchronization, thread-safety and concurrent data structures [1]. Pre-Requisites : Having a good knowledge about Java8, Functional Programming and spring boot microservices. What is Reactive programming? In essence, Reactive programming is an asynchronous programming paradigm concerned with data streams. The system time, a list of entries from the DB/API, user clicks, everything can be a stream of data. Data from different streams can easily be combined and transformed, and in the end processed/observed by the ...
Read more

Optimal binary search trees

Image
Suppose that we are designing a program to translate text from English to French. For each occurrence of each English word in the text, we need to look up its French equivalent. We could perform these lookup operations by building a binary search tree with $n$ English words as keys and their French equivalents as satellite data. Because we will search the tree for each individual word in the text, we want the total time spent searching to be as low as possible. We could ensure an $Θ(log_2 \;n)$ search time per occurrence by using a red-black tree or any other balanced binary search tree. Words appear with different frequencies, however, and a frequently used word such as the may appear far from the root while a rarely used word appears near the root. Such an organization would slow down the translation, since the number of nodes visited when searching for a key in a binary search tree equals one plus the depth of the node containing the key. We want words that occur frequently in the t...
Read more

Combining the emissions of multiple Observables together using RxJava Zip operator in a Spring Boot Micro service

Image
Introduction Well, today we are going to discuss an advanced RxJava operator called Zip. Let’s first take a look at the zip operator at a glance and then move on to a real world example that leverages the capabilities of the operator. In fact, zip is a very powerful and useful operator provided in the RxJava library. Prerequisites : Good knowledge of Java8, Functional Programming, RxJava, Spring Boot, Microservices. User Level : Advanced Since this is an advanced article, I am not going to walk you through the basics of RxJava or Spring Boot microservices. If you need to get some basic understanding of RxJava, I thoroughly recommend you to go through one of my previous blog posts [1] [2] or any other good introductory article about RxJava. If you need to learn more about Spring Boot microservices please go through some of the spring tutorials which are really comprehensive and impressive. RxJava Zip Operator Combines the emissions of multiple Observables together via a speci...
Read more