Redux Devtool (chrome extension) not displaying state

Question

I am new with Redux and newer with Redux devtool.

I made a simple app in which you click on a user and it display some data about him.

So basically in the state I have the current selected user.

But I don't know why the state keep beeing empty in redux devtool. (not in the app)

Here is where I create my store :

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

And here is the action :

export const USER_SELECTED = 'USER_SELECTED'
export function selectUser(user){
    return {
        type : USER_SELECTED,
        payload : user
    }

}

Here is a reducer :

import {USER_SELECTED} from '../actions/index'
export default function (state = null,action){
    switch(action.type){
        case USER_SELECTED :
            return action.payload
    }

    return state

}

And finally a call to the action :

this.props.selectUser(user)

The app works very well but I am probably missing something.

Thanks for your help !

Did you add this line to your store? https://github.com/zalmoxisus/redux-devtools-extension#11-basic-store `window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()` — Charlie L, May 10 '17 at 01:40
No worries. Glad I was able to help. I'll post it as an answer for you to accept please :) — Charlie L, May 12 '17 at 01:23
This video explains how to connect redux devtool to basic react redux app - https://youtu.be/TSOVLXQPWgA — Prem, Nov 18 '17 at 06:01

score 16 · Answer 1 · answered May 10 '17 at 04:29

16

Try the following if you have setup the store using a middleware

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(...middleware)
  ));

answered May 10 '17 at 04:29

GibboK

71,848
143
435
658

1

Thank you ❤️. This answer solved my problem. – nipoo Nov 17 '21 at 17:23

score 13 · Accepted Answer · edited Sep 12 '19 at 03:23

13

Did you add this line to your store?

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

github.com/zalmoxisus/redux-devtools-extension#11-basic-stor‌e

edited Sep 12 '19 at 03:23

Daniel Tonon

9,261
5
61
64

answered May 12 '17 at 01:24

Charlie L

463
2
12

Ruben Martinez · Answer 3 · 2020-02-04T22:24:45.327

I was looking at how I did it years ago and this would do the trick:

const store = createStore(reducers, 
  window.devToolsExtension && window.devToolsExtension()
)

For potential redux newcomers working on older projects/tutorials know that

window.devToolsExtensionis deprecated in favor ofwindow.REDUX_DEVTOOLS_EXTENSION`, and will be removed in next version of Redux DevTools: https://git.io/fpEJZ

as previously answered, replace with window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

score 0 · Answer 4 · answered May 09 '21 at 06:32

I tried everything but still Redux was not showing in dev tools, so I tried this chrome extension. Also reload after installing this extension.

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related?hl=en

It worked like a charm

Also the files,

store.js

import { createStore, applyMiddleware } from "redux";           // importing redux,redux-thunk(for my own use) and redux-devtools-extension
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

const initialState = {};                               // declaring the variable with empty state
const composeEnhancers = composeWithDevTools({});
const store = createStore(                              // creating the store
finalReducer,
initialState,
composeEnhancers(applyMiddleware(thunk))               // you can leave this as it is if no middleware
);

App.js

import { Provider } from 'react-redux';               // importing the provider and store
import store from './store'                            // using store 
ReactDOM.render(
<Provider store={store}>                              
  <App />
</Provider>,
document.getElementById('root')
);

score -1 · Answer 5 · answered Mar 17 '22 at 10:49

I was facing the same issue. I didn't get permanent solution yet but here is the workaround -

Change the chrome DevTools theme, only once it is required.
Now open devtools, you find the extension tab in DevTools.
You can again change the theme whatever you want to keep and this will fix your problem.

Redux Devtool (chrome extension) not displaying state

5 Answers5

Linked