Book Image

Redux Quick Start Guide

By : James Lee, Tao Wei, Suresh Kumar Mukhiya
Book Image

Redux Quick Start Guide

By: James Lee, Tao Wei, Suresh Kumar Mukhiya

Overview of this book

Starting with a detailed overview of Redux, we will follow the test-driven development (TDD) approach to develop single-page applications. We will set up JEST for testing and use JEST to test React, Redux, Redux-Sage, Reducers, and other components. We will then add important middleware and set up immutableJS in our application. We will use common data structures such as Map, List, Set, and OrderedList from the immutableJS framework. We will then add user interfaces using ReactJS, Redux-Form, and Ant Design. We will explore the use of react-router-dom and its functions. We will create a list of routes that we will need in order to create our application, and explore routing on the server site and create the required routes for our application. We will then debug our application and integrate Redux Dev tools. We will then set up our API server and create the API required for our application. We will dive into a modern approach to structuring our server site components in terms of Model, Controller, Helper functions, and utilities functions. We will explore the use of NodeJS with Express to build the REST API components. Finally, we will venture into the possibilities of extending the application for further research, including deployment and optimization.
Table of Contents (16 chapters)
Title Page
Copyright and Credits
About Packt

Getting started

Let's get started with using Redux. We will start with basic configurations, and we can take the configurations further in each chapter:

  1.  Installing node and npm/yarn is done as follows:

Install the latest version of a node from To verify the correct installation, run the following command:

node --version

You can get the latest version of yarn from, and npm from

  1. Initialize the project as follows:

The first thing is to initialize the project. In this project, we are going to use yarn. The easiest way to initialize the project with package.json is to run the init command:

yarn init
npm init

Follow the onscreen instructions and provide the details. It will ask about the name of the project, the description, the author name, the version, the license, and the entry point. Most of the information can be customized according to your requirements.

Now, create a source folder, src, to include all of our code. The next step is to set up webpack. The minimal package.json file looks like the following:

 "name": "gettting-started-with-redux-ch01",
 "version": "1.0.0",
 "description": "Getting Started With Redux",
 "main": "src/app/app.js",
 "scripts": {
   "start": "webpack-dev-server",
   "build": "webpack"
 "author": "Suresh KUMAR Mukhiya",
 "license": "MIT",
 "devDependencies": {
   "@babel/core": "7.2.0",
   "@babel/preset-env": "7.2.0",
   "@babel/preset-react": "7.0.0",
   "babel-core": "6.26.3",
   "babel-loader": "8.0.4",
   "babel-plugin-transform-object-rest-spread": "6.26.0",
   "webpack": "4.27.1",
   "webpack-cli": "3.1.2",
   "webpack-dev-server": "3.1.10"
 "dependencies": {
   "redux": "4.0.1"
  1. Configuring webpack is done as follows:

You can read more about webpack on their official documentation site ( The first thing is to install webpack and webpack-dev-server:

yarn add webpack webpack-dev-server --dev

Now, we need to configure the webpack. We can do that in different ways. A lot of information about webpack configuration can be found on the documentation site ( The minimum configuration that we need is as follows:

const path =require('path')
module.exports ={
 Mode: ‘development’,
 output: {
   path: path.resolve('dist'),
   filename: 'main.js'

Let's place the webpack configuration files into the webpack folder and create a base configuration file, called webpack.config.js. The loaders in the webpack tell the webpack what to do with the entry file(s). We are going to use Babel to transpile our JavaScript files; so, let's define the babel-loader for .js files, as follows:

const path = require("path");
module.exports = {
 mode: "development",
 entry: "./src/app/app.js",
 output: {
   path: path.resolve("dist"),
   filename: "main.js"
 module: {
   rules: [
       test: /\.jsx?$/,
       use: {
         loader: "babel-loader"
       exclude: /node_modules/

Generally, what we have is the bare minimum code required for Webpack configuration. However, in a real application, we would like to compile more resources than just the JavaScript files, including JS files, CSS files, fonts, image files, and others. We can configure these with webpack.

The most standard practice is to split the configuration into two types: development configuration and production configuration. By now, you might have already realized the need for separate configurations. A detailed blog article about this need and its process can be found at To keep the configuration simple and elegant, we have created three files for webpack; namely, webpack.base.babel.js,, and You can find a similar configuration in the starter file in the GitHub repository.

  1. Babel is configured as follows:

We will use Babel to compile JavaScript files. Let's configure it by installing babel and its related libraries:

yarn add @babel/core @babel/preset-env @babel/preset-react babel-core babel --dev --exact
yarn add babel-loader babel-plugin-transform-object-rest-spread --dev --exact

More configuration related to Babel can be found at

For the minimum configuration, we will go with creating a babel.config.js file and adding an entry, as follows:

module.exports = {
 presets: [
       modules: false
 plugins: ["transform-object-rest-spread"]

This file just indicates which libraries we are using in order to compile our JavaScript files. For example, we are going to use a transform-object-rest-spread library to utilize the spread feature. Learn more about this library at We can add other polyfill plugins that we plan to use throughout the project later on. Babel can be configured in multiple ways. We can also create a .babelrc file to configure it. You will find a working example in Chapter 2, Testing.

  1.  Define the entry file:

The entry file indicates the startup file. We will point our entry file to app/app.js. This file contains the main entry codes. This file will be transpiled into main.js by Babel. Secondly, we will create an index.html file, which acts as the entry file for our application:

<!doctype html>
<html lang="en">
 <!-- The first thing in any HTML file should be the charset -->
 <meta charset="utf-8">
 <!-- Make the page mobile compatible -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Allow installing the app to the homescreen -->
 <meta name="mobile-web-app-capable" content="yes">
 <link rel="icon" href="/favicon.ico" />
 <div id="root"></div>
<script src="dist/main.js"></script>

Also, inside of the app/app.js, we can try to log some text to verify that the configuration is working fine:

console.log("Welcome to Redux Programming");

Now, the last step is to configure the webpack script to run the build. This can be done by placing scripts in the package.json file:

"scripts": {
 "start": "webpack-dev-server",
 "build": "webpack"

The first step is to build the files. To do that, simply run yarn build from your command line. Now, we can run the webpack by using the yarn start command from the command line. Note that this is the minimum configuration required to get started with Redux. Our aim here is for you to learn Redux. So, we are going to use starter files for each of the projects, which can be found in the GitHub repository for this book. The starter files, if preconfigured with Babel, Webpack, and Eslint, are ready to be consumed for further development.

  1. Installing Redux:

To get started with Redux, we need to add Redux to our dependencies list, as follows:

yarn add redux --exact

Now, from the project root folder, inside of your command line, run yarn start and open http://localhost:8080 in your favorite browser, checking the console. You should see the log we have in yourapp/app.js.