What is Redux DevTools and how to use them

Generally used with Angular and React, Redux is an open-source JavaScript library that works to manage and centralize the state of an application. When combined with Angular and React, it is done with the intention of building user interfaces, similar to Facebook's Flux architecture.

One of its best-known functions is the Devtools, which provides a debugging platform for applications developed with the help of Redux.

Redux Devtools Features

• Allows you to inspect each payload for status and action
• You can "cancel" actions going back in time
• If the gearbox code is changed, each action will be evaluated again "in stages"
• If the reducers launch then the error and the action in which it happened can be identified
• With the persistState () store enhancer, you can preserve debugging sessions on page reloads.

Already familiar with the main features of Devtools in Redux, let's see how you can skip actions and go back in time with the help of this tool.

Take into account that there are two variants of Redux development: Redux DevTools and Eztensión Redux DevTools.

Using Redux DevTools

The first thing is to install the extension in your browser, a very important one to connect your browser to Redux, without it you will not be able to load the tools from your computer.

Several options can be followed to connect this new tool, but this is the favorite of Redux experts:

1. npm install --save redux-devtools-extension

2. import {composeWithDevTools} from 'redux-devtools-extension' (this code goes inside the store file.

3. Finish by composing your store with the imported module:

import {composeWithDevTools} from 'redux-devtools-extension';

const store = createStore (reducer, composeWithDevTools (
  applyMiddleware (... middleware),
  // other store enhancers if any
));

Here's how to add custom features:

import {composeWithDevTools} from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools ({
  // Specify custom devTools options
});
const store = createStore (reducer, / * preloadedState, * / composeEnhancers (
  applyMiddleware (... middleware),
  // other store enhancers if any
));

If you don't have enhancers or middleware in your application, there is a simpler approach:

import {devToolsEnhancer} from 'redux-devtools-extension';

const store = createStore (reducer, / * preloadedState, * / devToolsEnhancer (
  // Specify custom devTools options
));

In this way, you can start using Redux DevTools, just as our developers at Rootstack do when they create the necessary applications to solve the technological problems of our clients.

We recommend you on video