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:

...

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

Debugging Using the Redux DevTools

Logger middleware

Redux DevTools