Set up Redux Devtools

Redux Devtools is a Chrome extension which you need to install first.

Then update your composer in your store to use Redux Devtools when not in the production environment and only when a window object exists (so it doesn’t break when building).

The original composer looks like this:

const composedEnhancers = compose(applyMiddleware(...middleWares));

Update this composer to choose between the original and Redux Devtools depending on the environment:

const composedEnhancer =
  (process.env.NODE_ENV !== "production" &&
    window &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
  compose;

const composedEnhancers = composedEnhancer(applyMiddleware(...middleWares));

Now when you view your redux site in Chrome the Devtools extension will be highlighted and you can view all the live states and even do a playback of all the states. Very useful for debugging complex applications.