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 !

Implead

Did you add this line to your store? github.com/zalmoxisus/redux-devtools-extension#11-basic-store window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() – Sermonize

That's it ! Thanks, really !!! – Implead

No worries. Glad I was able to help. I'll post it as an answer for you to accept please :) – Sermonize

This video explains how to connect redux devtool to basic react redux app - youtu.be/TSOVLXQPWgA – Vesical

Answer 1

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

Sermonize

Answer 2

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

Albaalbacete

Thank you ❤️. This answer solved my problem. – Terzetto

Answer 3

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__()

Tui

Answer 4

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

Decide

Answer 5

I had the same issue. To solve you should follow these steps:

1. Remove or uninstall Redux DevTools from your browser
2. Reinstall the Redux DevTools
3. Reload your server

Warehouseman

Answer 6

I could see actions (and payload), but the state was always empty, this was solution for me (tested only on chrome):

1. remove Redux DevTools from extensions
2. install Redux DevTools extension
3. restart chrome
4. restart server

Iridectomy

Answer 7

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

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

Procephalic