An introduction to React-Redux Ecosystem

Introduction

Today I am going to walk you through React which is a declarative, efficient, and flexible JavaScript library for building user interfaces.  ReactJS allows us to create reusable UI components. Lots of people use React as the V in MVC. React abstracts away the DOM from you, giving a simpler programming model and better performance [1].

Prerequisites

Good knowledge of Javascript, HTML and CSS.

React Features

JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.
Components − React is all about components. You need to think of everything as a component. This will help you to maintain the code when working on larger scale projects.
Unidirectional data flow − React implements one way data flow which makes it easy to reason about your app.
Redux - This is the data management library inspired by Flux.
Backed by Facebook - React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0. [1]

React Advantages

• React uses virtual DOM which is JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM.
• Component and Data patterns improve readability which helps to maintain larger apps.

Workshop

Well, let’s go ahead and implement a simple React app and get our hands dirty with React. The app I am going to build is a simple English to Pig Latin translator. You may find the working code for the project here [2]. First let me explain how it works and then we’ll dive into the code. The app has a Form so that a user can enter some english text and then click on the submit button. This form submission will cause to trigger the translation process and finally Pig Latin text is shown to the end user. Take a look at the following markup.

To run the project, check that out from github [2] and run the following commands.
npm install
This will install all the dependent libraries and packages including the webpack dev server. Then to deploy the project into webpack dev server and start it merely execute the command below.

npm start

Well now you have running application with you and you can give it a try by entering some english text and converting it to equivalent Pig Latin form. Now let me walk you through the code and explain it a bit. Let’s start with the Redux form first. I have listed down the code below.

	import React, { Component } from 'react';
	import { reduxForm } from 'redux-form';
	import { pigLatinConvert } from '../actions/index';
	class InputBox extends Component {
	render() {
	const { fields: { inputtext }, handleSubmit } = this.props;
	return (
	<div>
	<form onSubmit={handleSubmit(this.props.pigLatinConvert)} >
	<h3>Pig Latin Converter</h3>
	<div className={`form-group ${inputtext.touched && inputtext.invalid ? 'has-danger' : ''}`}>
	<label>Enter a Text</label>
	<textarea className="form-control" {...inputtext} />
	<div className="text-help">
	{inputtext.touched ? inputtext.error : ''}
	</div>
	</div>
	<button type="submit" className="btn btn-primary">Submit</button>
	</form>
	</div>
	);
	}
	}
	function validate(values) {
	const errors = {};
	if (!values.inputtext) {
	errors.inputtext = 'Enter a text here';
	}
	return errors;
	}
	export default reduxForm({
	form: 'PigLatinForm',
	fields: ['inputtext'],
	validate
	}, null, { pigLatinConvert } )(InputBox);

view raw input_box.js hosted with ❤ by GitHub

It’s merely a simple HTML form with some validation added. The most important point here is the form submission. What happens when the form is submitted. There inside the handleSubmit function we call an action creator which is responsible for creating an action for us. Let’s take a look at this action creator for a second.

	import pigLatin from 'piglatin';
	export const PIG_LATIN = 'PIG_LATIN';
	export function pigLatinConvert(input){
	const output = pigLatin(`${input.inputtext}`);
	return {
	type: PIG_LATIN,
	payload: output
	};
	}

view raw actions_index.js hosted with ❤ by GitHub

Here the conversion logic function is called with our input text and conversion is performed. So the action creator is mainly responsible for processing of the form submission event in this case. Then it gets the converted string, a new action is created with that and returned. Note that I am using the npm module [3] out of the box for the Pig Latin translation here. Also note that the action has a type which in this case PIG_LATIN and a payload which is the converted text.

This action is then dispatched to our reducer. The reducer code is listed below.

	import { PIG_LATIN } from '../actions/index';
	const INITIAL_STATE = { output: null };
	export default function(state = INITIAL_STATE, action) {
	switch (action.type) {
	case PIG_LATIN:
	return { ...state, output: action.payload };
	default:
	return state;
	}
	}

view raw reducer_piglatin.js hosted with ❤ by GitHub

The reducer is interested in the action which is returned above. It merely creates the new state of our application and returns. Note that reducer never ever modify the state of our application. Rather it creates and returns a new state. The state here refers to the application state not the component state.

Finally that new converted data is accessed in our ConvertedText component as below.

	import React from 'react';
	import { connect } from 'react-redux';
	const ConvertedText = (props) => {
	return(
	<label>{props.output}</label>
	);
	}
	function mapStateToProps(state){
	return { output: state.piglatin.output };
	}
	export default connect(mapStateToProps)(ConvertedText);

view raw converted_text.js hosted with ❤ by GitHub

Conclusion

Well we covered a lot of ground in React and Redux landscape today. I gave a little introduction about it and walk you through a working sample application [2] while explaining how each bits and piece fits together to form an entire data flow in our application. I think this helps you to understand basic concepts of React and Redux and just to get you started with React. That does it for another session and I’ll see you in my next blogpost.

References

[1] https://www.tutorialspoint.com/reactjs/reactjs_overview.htm
[2] https://github.com/ravindraranwala/piglatinconverterapp
[3] https://www.npmjs.com/package/pig-latin-converter