Setting up Redux Devtools for React applications

Hello everyone, in this article we are going to look at how can we set up redux devtools for react applications which are using redux.

As a reference we will take our previous tutorial's redux setup. Visit :

Best coding practice and structure for redux saga with react hooks | Separate watcher and worker saga | React clean code

How to install Redux Devtools?

To install Redux Dev, if you are using Google Chrome, go to chrome web store or https://chrome.google.com/webstore/category/extensions

Search redux devtools

Select below extension

Install the extension

After successful installation an icon for the same should be added beside chrome url bar. Now whenever you run a react application which is using redux the icon will glow. Refer below mark on the screenshot:

Now let's focus on code

As mentioned in the above tutorial, Store file for redux setup looks like below :

import { createStore,applyMiddleware } from 'redux'
import rootReducer from '../reducers'
import createSagaMiddleware from 'redux-saga'
import rootSaga from '../sagas'

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware()
    const store = createStore(
        rootReducer,
        applyMiddleware(sagaMiddleware)
    )
    sagaMiddleware.run(rootSaga)
    return store;
}
export default configureStore;

Now we need to import "compose" from redux library to wrap applyMiddleware and redux-devtools
Final code will look like below :

import { createStore,applyMiddleware,compose } from 'redux'
import rootReducer from '../reducers'
import createSagaMiddleware from 'redux-saga'
import rootSaga from '../sagas'

const configureStore = () => {
    const sagaMiddleware = createSagaMiddleware()
    const store = createStore(
        rootReducer,
        compose(
            applyMiddleware(sagaMiddleware),
            window.__REDUX_DEVTOOLS_EXTENSION__ &&        

            window.__REDUX_DEVTOOLS_EXTENSION__()
        )
    )
    sagaMiddleware.run(rootSaga)
    return store;
}
export default configureStore;

Now let's test the same with above mention tutorial's example, we will click on glowing icon of redux devtools and what which actions are getting called, initial store, changing store values with action etc :

 

Thanks for your time... :)