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.

	import React, { Component } from 'react';
	import { reduxForm } from 'redux-form';
	import { createTimer } from '../actions/index';
	class TimerNew extends Component {
	render() {
	const { fields: { hours, minutes, seconds, label }, handleSubmit } = this.props;
	return (
	<form onSubmit={handleSubmit(this.props.createTimer)}>
	<h3>Create a New Timer</h3>
	<div className={`form-group ${hours.touched && hours.invalid ? 'has-danger' : ''}`}>
	<label>Hours</label>
	<input type="text" className="form-control" {...hours} />
	<div className="text-help">
	{hours.touched ? hours.error : ''}
	</div>
	</div>
	<div className={`form-group ${minutes.touched && minutes.invalid ? 'has-danger' : ''}`}>
	<label>Minutes</label>
	<input type="text" className="form-control" {...minutes} />
	<div className="text-help">
	{minutes.touched ? minutes.error : ''}
	</div>
	</div>
	<div className={`form-group ${seconds.touched && seconds.invalid ? 'has-danger' : ''}`}>
	<label>Seconds</label>
	<input type="text" className="form-control" {...seconds} />
	<div className="text-help">
	{seconds.touched ? seconds.error : ''}
	</div>
	</div>
	<div className={`form-group ${label.touched && label.invalid ? 'has-danger' : ''}`}>
	<label>Label</label>
	<input type="text" className="form-control" {...label} />
	<div className="text-help">
	{label.touched ? label.error : ''}
	</div>
	</div>
	<button type="submit" className="btn btn-primary">+</button>
	</form>
	);
	}
	}
	function validate(values) {
	const errors = {};
	if (!values.hours) {
	errors.hours = 'Enter hours';
	}
	if (!values.minutes) {
	errors.minutes = 'Enter minutes';
	}
	if (!values.seconds) {
	errors.seconds = 'Enter seconds';
	}
	if (!values.label) {
	errors.label = 'Enter label';
	}
	return errors;
	}
	export default reduxForm({
	form: 'TimerNewForm',
	fields: ['hours', 'minutes', 'seconds', 'label'],
	validate
	}, null, { createTimer })(TimerNew);

view raw TimerNew.js hosted with ❤ by GitHub

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

	import uuidV4 from 'uuid/v4';
	import * as constants from '../components/constants';
	import {
	CREATE_TIMER, DELETE_TIMER, UPDATE_STATE, COUNT_DOWN, RESET_TIMER
	} from './types';
	export function createTimer(props) {
	let seconds = Number.parseInt(props.hours) * 60 * 60 + Number.parseInt(props.minutes) * 60 + Number.parseInt(props.seconds);
	return {
	type: CREATE_TIMER,
	payload: { id: uuidV4(), label: props.label, seconds: seconds, remainingSeconds: seconds, countdownState: constants.RESUME }
	};
	}
	export function deleteTimer(id) {
	return {
	type: DELETE_TIMER,
	payload: id
	};
	}
	export function updateState(id, newState) {
	return {
	type: UPDATE_STATE,
	payload: { id: id, countdownState: newState }
	};
	}
	export function countDown(id, remainingSeconds) {
	return {
	type: COUNT_DOWN,
	payload: { id: id, remainingSeconds: --remainingSeconds }
	};
	}
	export function resetTimer(id, seconds) {
	return {
	type: RESET_TIMER,
	payload: { id: id, remainingSeconds: seconds }
	};
	}

view raw actions_index.js hosted with ❤ by GitHub

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

	import _ from 'lodash';
	import {
	CREATE_TIMER, DELETE_TIMER, UPDATE_STATE, COUNT_DOWN, RESET_TIMER
	} from '../actions/types';
	const INITIAL_STATE = {};
	export default function(state=INITIAL_STATE, action) {
	switch (action.type) {
	case CREATE_TIMER:
	return { ...state, [action.payload.id]: action.payload }
	case DELETE_TIMER:
	return _.omit(state, action.payload);
	case UPDATE_STATE:
	return { ...state, [action.payload.id]: { ...state[action.payload.id], countdownState: action.payload.countdownState }};
	case COUNT_DOWN:
	return { ...state, [action.payload.id]: { ...state[action.payload.id], remainingSeconds: action.payload.remainingSeconds }};
	case RESET_TIMER:
	return { ...state, [action.payload.id]: { ...state[action.payload.id], remainingSeconds: action.payload.remainingSeconds }};
	}
	return state;
	}

view raw count_down_reducer.js hosted with ❤ by GitHub

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.

	import React, { Component } from 'react';
	import { connect } from 'react-redux';
	import _ from 'lodash';
	import { deleteTimer, updateState, countDown, resetTimer } from '../actions/index';
	import CountdownTimer from './count_down_timer.js';
	import * as constants from './constants';
	class TimerIndex extends Component {
	constructor(props) {
	super(props);
	this.renderTimers = this.renderTimers.bind(this);
	this.playAudio = this.playAudio.bind(this);
	}
	renderTimers() {
	return _.map(this.props.timers, timer => {
	return (
	<li key={timer.id}>
	<CountdownTimer { ...timer } onPauseResumeClick={this.props.updateState} onDeleteClick={this.props.deleteTimer}
	onCountDown={this.props.countDown} onResetClick={this.props.resetTimer} onCompletion={this.playAudio} />
	</li>
	);
	});
	}
	playAudio() {
	var audio = new Audio(constants.AUDIO_URL);
	audio.play();
	}
	render(){
	return (
	<div>
	<h3>Timers</h3>
	<ul className="list-group row timer-list">
	{ this.renderTimers() }
	</ul>
	</div>
	);
	}
	}
	function mapStateToProps(state){
	return { timers: state.timers };
	}
	export default connect(mapStateToProps, { deleteTimer, updateState, countDown, resetTimer })(TimerIndex);

view raw timer_list.js hosted with ❤ by GitHub

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.

	import React, { Component } from 'react';
	import { connect } from 'react-redux';
	import * as constants from './constants';
	class CountdownTimer extends Component {
	constructor(props) {
	super(props);
	this.secondsToTime = this.secondsToTime.bind(this);
	this.timer = 0;
	this.startTimer = this.startTimer.bind(this);
	this.countDown = this.countDown.bind(this);
	this.onPauseResumeClick = this.onPauseResumeClick.bind(this);
	this.onResetClick = this.onResetClick.bind(this);
	this.onDeleteClick = this.onDeleteClick.bind(this);
	this.displayDigit = this.displayDigit.bind(this);
	this.displayHeader = this.displayHeader.bind(this);
	}
	secondsToTime(secs) {
	let hours = `${constants.ZERO}${Math.floor(secs / (60 * 60))}`.slice(-2);
	let divisorForMinutes = secs % (60 * 60);
	let minutes = `${constants.ZERO}${Math.floor(divisorForMinutes / 60)}`.slice(-2);
	let divisorForSeconds = divisorForMinutes % 60;
	let seconds = `${constants.ZERO}${Math.ceil(divisorForSeconds)}`.slice(-2);
	let obj = {
	"h": hours,
	"m": minutes,
	"s": seconds
	};
	return obj;
	}
	componentDidMount() {
	this.startTimer();
	}
	componentWillUnmount() {
	clearInterval(this.timer);
	}
	startTimer() {
	this.timer = setInterval(this.countDown, constants.INTERVAL);
	}
	countDown() {
	// Remove one second, set state so a re-render happens.
	this.props.onCountDown(this.props.id, this.props.remainingSeconds);
	// Check if we're at zero.
	if (this.props.remainingSeconds == 0) {
	// Play the onCompletion callback first.
	this.props.onCompletion();
	// call the onCompletion handler here.
	clearInterval(this.timer);
	}
	}
	onPauseResumeClick() {
	if (this.props.countdownState == constants.PAUSE) {
	this.props.onPauseResumeClick(this.props.id, constants.RESUME);
	this.startTimer();
	} else {
	this.props.onPauseResumeClick(this.props.id, constants.PAUSE);
	clearInterval(this.timer);
	}
	}
	onResetClick() {
	clearInterval(this.timer);
	this.props.onResetClick(this.props.id, this.props.seconds);
	// If the timer is currently cleared make sure we start it up back again.
	this.startTimer();
	}
	onDeleteClick() {
	this.props.onDeleteClick(this.props.id);
	}
	displayDigit(digit) {
	const baseSelector = "digit-display position-";
	return `${baseSelector}${digit}`;
	}
	displayHeader(){
	var initialTime = this.secondsToTime(this.props.seconds);
	return `${this.props.label}${constants.OPENING_BRACKET}${initialTime["h"]}${constants.COLON}${initialTime["m"]}${constants.COLON}${initialTime["s"]}${constants.CLOSING_BRACKET}`
	}
	render() {
	let borderClass = this.props.remainingSeconds === 0 ? "li-border" : constants.EMPTY_SPACE_CHAR;
	var remainingTime = this.secondsToTime(this.props.remainingSeconds);
	return(
	<div className={`list-group-item col-md-5 li-space ${borderClass}`}>
	<div>{this.displayHeader()}</div>
	<span className = {this.displayDigit(remainingTime["h"].charAt(0))}></span>
	<span className = {this.displayDigit(remainingTime["h"].charAt(1))}></span>
	<span className = {this.displayDigit(remainingTime["m"].charAt(0))}></span>
	<span className = {this.displayDigit(remainingTime["m"].charAt(1))}></span>
	<span className = {this.displayDigit(remainingTime["s"].charAt(0))}></span>
	<span className = {this.displayDigit(remainingTime["s"].charAt(1))}></span>
	<button className="btn btn-info btn-space btn-sm"
	onClick={ this.onPauseResumeClick }>
	{ this.props.countdownState == constants.PAUSE ? constants.RESUME : constants.PAUSE }
	</button>
	<button className="btn btn-warning btn-space btn-sm" onClick={ this.onResetClick }>
	Reset
	</button>
	<button className="btn btn-danger btn-space btn-sm" onClick={ this.onDeleteClick }>
	Delete
	</button>
	</div>
	);
	}
	}
	export default CountdownTimer;

view raw count_down_timer.js hosted with ❤ by GitHub

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