Debugging Using the Redux DevTools
Explore how to use Redux DevTools for efficient debugging of Redux state in React apps. Understand setup, middleware use, and time travel debugging to monitor and inspect state changes clearly.
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: