Debugging a React application using React and Redux Dev Tools

Debugging is essential for any application, it helps us to identify and fix bugs. Chrome has two powerful tools to debug React/Redux applications integrating those to its Developer Tools. React Dev Tool and Redux Dev Tool.

Getting Ready

Using Google Chrome, you have to install both extensions:

• React Developer Tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
• Redux DevTools: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=es

Also, you need to install the redux-devtools-extension package:

npm install--save-dev redux-devtools-extension

Once you've installed React Developer Tools and Redux DevTools, you need to configure them.

If you try to use Redux DevTools directly, it won't work; this is because we need to pass the composeWithDevTools method into our Redux store, this should be our configureStore.js file:

// Dependencies
import { createStore...