Search code examples
javascriptreactjsreduxredux-devtools-extension

react-redux developer tool is inactive on the extension bar and not showing the state of the application


I just completed the redux-tutorial and trying to see the state in the redux-devtools. But the redux-devtools is inactive in the extensions bar and when I clicked it it shows menu "to right, to left etc". When I choose on of the options it show data in the state which is not exist. Here is my index.js file

import React from 'react';
import {render} from 'react-dom';
import './index.css';
import { createStore } from 'redux'
import App from './components/App';
import rootReducer from './reducers';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';

const store = createStore(rootReducer)

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)
serviceWorker.unregister();

Solution

  • add REDUX_DEVTOOLS_EXTENSION in the createStore

    const store = createStore(
       rootReducer, 
       window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
      );