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 &&

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.

Leave a Reply

Your email address will not be published. Required fields are marked *