What are Redux Dev Tools?

React Redux DevTools is a package(library) that is used during development time .It provides power-ups for our Redux development workflow. The main focus is to keep in mind the code stripping while walking through production.DevTool is an extension provided by Chrome. It have a console where  you can set up our web development application environment with react Redux. 

This redux dev tools extension helps in visualizing the actions and state changes that generally occur in a Redux-based application.

Setting Up the environment

To understand the application workflow and how things are going to work, and we will set up the react Redux DevTools step by step for a sample project.

1. Addition of Redux DevTools extension to our browser.
2. Installation of Redux DevTools dependencies and adding Redux DevTools to store.  
3. Visualizing the reacr stores and actions in react Redux DevTools Console.

• Addition of Extension

Download and install react Redux DevTools from the browser. Add the devtools extension to the browser as shown below.

After the devtools extension is installed and added, and we can see the Tool icon on the top right corner of the browser as shown.

• Installation of DevTools dependencies

To install the dependencies of Redux DevTools, all we need to do is to  provide some commands into our system. The web development application dependencies can be served with the below commands.

npm install --save-dev-devtools-extension  

After this step, we should be importing the compose functionality from react Redux DevTools using

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

The next step is to create a store from using this compose method as shown below

const store = createStore(rootReducer, composeWithDevTools( ));  
Or   
import { composeWithDevTools } from 'redux-devtools-extension';  
const store = createStore(reducer, composeWithDevTools(  
  applyMiddleware(...middleware),  
  // other store enhancers if any  
));  

The main objective of installing these web dependencies is to probe inside our redux store and view the redux states and actions. It can be called more of a diagnostics dev tool where we see what is happening. Another way of creating a redux store is given in the code snippet which signifies a store with the Redux DevTools extension.

//index.js (Simple store + Redux DevTools set up)  
import React from "react";  
import { render } from "react-dom";  
import { Provider } from "react-redux";  
import App from "./components/App";  
import rootReducer from "./reducers";  
import { createStore } from "redux";  
import { composeWithDevTools } from "redux-devtools-extension";  
const store = createStore(  
  rootReducer,  
  composeWithDevTools()  
  // other store enhancers if any  
);  
render(  
  <Provider store={store}>  
    <App />  
  </Provider>,  
  document.getElementById("root")  
);  

After this step, let’s install the  middleware because middleware in Redux makes it possible to use asynchronous network calls and keep the update accordingly. In the following example, we will see how a redux store in middleware looks and how to set up DevTools for the same. This, in the  below example, we would be using Redux-promise middleware. The code snippet and command for the below following are.

npm install --save-dev-devtools-extension  

The above command installs all the promise based middleware to the Redux.

import React from 'react'  
import ReactDOM from "react-dom";  
import { Provider } from 'react-redux'  
import { createStore, applyMiddleware } from "redux";  
import ReduxPromise from "redux-promise";  
import rootReducer from './reducers'  
import App from './components/App'  
//setting up store with middleware and redux dev tools viewers  
const store = createStore(rootReducer,    
applyMiddleware(ReduxPromise));  
ReactDOM.render(  
  <Provider store={store}>  
    <App />  
  </Provider>,  
  document.getElementById("root") );  

Redux DevTools Console

Now that we can set up everything from redux store to dependencies, let’s understand the main stuff. Since we  have already installed the browser extension for Redux DevTools correctly, we would be discovering the console and discuss their features.

Considering that everything is installed properly when we click on this new option, we may see something like this.

Let’s try to breakdown some of the options shown in the above console.

Left side console tools

The left-hand column of the dash shows the real-time actions that are being fired on the current web page since they are already defined by the action creator types.

This is comes to complete with a filter option at the web page top and each and every time the redux action is fired after the last one, the individual option pops up and displays 2 options Jump and Skip. This is where we can see time traveling and/or changing the web application over view. The Jump options takes our web application to a react state when the action is fired and the Skip option crosses out that action to show us how the web application will look like without that action.

These options are tend to manipulate the web application’s real-time working environment and let us see how the actions are going to behave pre and post once the action is fired.

Right side console tools

The right side of the react redux DevTools consists of the four more helpful options for the dev tool. The options are shown as follows.

Diff

It enables us to see the react redux state of the web application and the relation it is serving with for each and every action in the react state.

Whenever we selects an redux action from the left-hand side of the console, the Diff options we will show us only what the individual action changed in the state tree.

Action

The Action tab shows the every action type and any that is being carried by the reducers when we click on it.

Considering the above example in the above image, the redux action has a typical feature or FETCH_SUCCESS and it also carries data and the requested features to the react reducer. We are has have observe that there is 3 various sub-tabs Tree, Char, and Raw within the master action tab. They are provide  to just display the same data into various formats. and To be precise, the Tree view is the default view and it is summarizes the data into a one line, while the Chart tab shows the store tree up-to-date and the Raw options shows all the data included react reducers get together to the corresponding data branches. The raw tab also includex shows the redux action creator in a code view. It appears something like this.

State

This tab also shows the entire react state tree at the time of action selection at the left-hand side of the console.

Test

This tab is providing to create test format in some previous pre-provided testing frameworks. It also takes into account the root react state and provides the written test on what the end state should hold.

Top Console

The top console offers two more tabs. The right tabs allow us to change between two instances of currently running web applications on the web page if we have various stores running on the same web page. The left tab shows two various modes i.e. inspector mode, which is mainly treated as default nodes and is providing to find the various tools used in the web application. The another options is Log Monitor that shows whole data actions and states along with a slider option to view in and watch the tree grow or shrink. The Chart shows the show the react state in the form of a tree structure.

Bottom Console

The bottom of the page console providing some additional functionality to carry out operations on the react actions and states. It also providing time travel, looking into react dispatched actions, and importing and exporting react states, and controlling them remotely.

The Starting from the left, the first 3 options are mainly used to create a new page console or view to the left, right, and/or bottom. Next comes the Pause option is used to stop the recordings of react actions being created within the console.

Then comes the next tab option, i.e., Lock Changes that will freeze the features of the running web applications or the future web applications. It takes the Pause recording to a whole next level by creating a lock to avoid future react state changes in the web application. The next option is Persist, which keeps its current react state even if we reload the page. The last option is the react Dispatcher, which either shows or hides the dispatching modules. It also fires a custom react action provided custom data is present alongside.

Thus These are the Redux DevTools. Which gives additional benefits while applications are being built.