How to enable Redux Devtools?

Question

I am following tutorial on React and instructor install an extension on Chrome, the Redux Devtools. In my case i am wondering why my extension seems to be inactive (in color gray). In my chrome extension settings, it is On, site access is set On all sites, Allow access to file URLs is on but when i view my Redux tab, it shows:

No store found. Make sure to follow the instructions.

On the .js file, there is a declaration something like this:

const ReactReduxDevTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
let store;
if(window.navigator.userAgent.includes("Chrome") && ReactReduxDevTools){
 store = createStore(
        rootReducer,
        initialState,
        compose(
            applyMiddleware(...middleware), 
            ReactReduxDevTools)
    );
}else{
...
}

What could be the problem? Compatibility with the Chrome?

Answer 1

import {Provider} from 'react-redux'

import {createStore, applyMiddleware, compose} from 'redux'

import reducers from './reducers';


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducers, composeEnhancers(applyMiddleware()))


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

Answer 2

It only works when it detects a store on the application you are running. It makes sense since there is nothing to be shown.

Start an application with Redux correctly wired up and it will appear colored and will have very useful information.

EDIT:

I think I found it. Check the code correction. The compose method must be raplace if a __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ exists.

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

let store;

store = createStore(
          rootReducer,
          initialState,
          composeEnhancers(
            applyMiddleware(...middleware)
        );

No if statements

Answer 3

The easier way to apply if you have multiple middlewares.

1. Install extension using npm or yarn

npm install --save redux-devtools-extension

2. Apply to store.js or wherever your store is initialized

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

const middlewares = [] //put your middleware over here

export const store = createStore(Reducer,composeWithDevTools(
    applyMiddleware(...middlewares))
);