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 !

Answer 1

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