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
Dedication
About Packt
Contributors
Preface
Index

Understanding Redux DevToolsHMR


Our starter kit is already configured with HMR  plugin to facilitate development. You can read more about it at https://webpack.js.org/guides/hot-module-replacement/

Replacing the hot module

This is one of the most useful features provided by webpack. Although our project is already configured and enabled with this feature, in this section we are going to walk through it. We are using webpack-hot-middleware as it allows us to add hot reloading into an existing server (https://github.com/webpack-contrib/webpack-hot-middleware). To configure it, follow these steps:

  1. Install thenpmmodule:
yarn add webpack-hot-middleware --dev --exact
or
npm install --save-dev webpack-hot-middleware
  1. Enable hot reloading in the webpack configuration file. If you check thewebpack/webpack.dev.babel.jsfile, you will see the configuration inside the plugins array:
plugins: [
new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      inject: true,
      template: 'app/index...