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?

score 12 · Answer 1 · answered Dec 18 '20 at 11:52

12

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')
);

answered Dec 18 '20 at 11:52

Naved Khan

1,699
16
13

This answer means that probably @Anirudh Lou have missed to "use" the store, as , – Carmine Tambascia Feb 04 '22 at 10:18

niconiahi · Answer 2 · 2020-03-24T19:55:51.640

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

edited Mar 24 '20 at 19:55

answered Mar 24 '20 at 19:39

niconiahi

545
4
5

The store has to be configured to talk to the extension. Please see [the Redux docs page on "Configuring Your Store"](https://redux.js.org/recipes/configuring-your-store). Also, [our official Redux Toolkit package](https://redux-toolkit.js.org) automatically configures the devtools extension setup for you. – markerikson Mar 24 '20 at 19:45

score 0 · Answer 3 · answered Jan 30 '22 at 12:20

The easier way to apply if you have multiple middlewares.

Install extension using npm or yarn

npm install --save redux-devtools-extension

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))
);

score 0 · Answer 4 · answered May 17 '23 at 21:23

@reduxjs/toolkit comes with devtools already built in (which should strongly be considered when using redux). Just add the flag:

export const store = configureStore({
  reducer: enableBatching(
    combineReducers({
      appState: stateSlice.reducer,
    })
  ),
  devTools: true // set to `true` if dev mode, i.e. import.meta.env.DEV for vite
});

How to enable Redux Devtools?

4 Answers4

Linked