Setting up hot reloading

Now that we have set up Redux DevTools, we will set up hot reloading. Hot reloading is a way to update code in a React/Redux project without having to refresh the page. At the moment, webpack automatically refreshes the page when some of the code changes (when we save a file). Hot reloading means that the code change will be applied when we save a file, without a full browser refresh.

Hot reloading React components

Let's set up hot reloading for our React components.

1. First of all, we install react-hot-loader, which implements hot reloading for React components:

npm install --save react-hot-loader@next

2. Then, we edit our babel config; open the .babelrc file and add react-hot-loader/babel as a plugin. The file should look as follows:

{
  "presets":[ "es2015", "react" ],
  "plugins": [
    "transform-object-rest-spread",
    "react-hot-loader/babel"
  ]
}

Hot reloading other code with webpack

Now, we will configure webpack for hot reloading. We start by splitting our webpack...