Debugging Using the Redux DevTools

Learn how to inspect and debug the application's state changes.

We'll cover the following

Logger middleware

We have several tools available to inspect what’s currently in the store. For example, logger middleware such as redux-logger from LogRocket allows us to log each dispatched action, its previous state, and the new state into the browser console. We can find it here.

We can also manually log these to the console using console.log(store.getState()). However, this can quickly become cumbersome, especially when dealing with asynchronous actions.

Redux DevTools

Redux DevTools is another great alternative for debugging purposes. Implemented as a browser extension for Chrome, Firefox, and Edge, Redux DevTools seamlessly integrates with existing developer tools. We can find them in the stores below:

Once installed, the browser developer tools are extended by an extra tab called “Redux,” now easily accessible for debugging purposes. To use it fully, we have to make a few modifications to our codebase, though. Another enhancer has to be added to the store. More on this later.

Get hands-on with 1200+ tech skills courses.