CODEWITHSUNDEEP
javascriptreactjsreduxredux-devtools-extension
Topsy
Topsy

Reputation: 1162

Redux Devtool (chrome extension) not displaying state

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 !

Upvotes: 17

Views: 39780

Answers (7)

the&#39;Developer&#39;
the&#39;Developer&#39;

Reputation: 1

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

Upvotes: 0

mustafa habibi
mustafa habibi

Reputation: 1

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

Upvotes: 0

Harsh Boricha
Harsh Boricha

Reputation: 133

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.

Upvotes: -1

confused_
confused_

Reputation: 1681

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

Upvotes: 0

Ruben Martinez
Ruben Martinez

Reputation: 653

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

Upvotes: 4

Charlie L
Charlie L

Reputation: 463

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

Upvotes: 13

GibboK
GibboK

Reputation: 73918

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

Upvotes: 18

Related Questions