Redux Dev Tool not reflecting state change and actions

Question

Redux dev tools extension showing only the initial state and init action and not reflecting dispatched actions and state changes done through code. Whereas if I use the dispatcher in the extension then it shows the action and state changes.

I have spent a long time on this but it ended in vain.

This is my action creator.

import * as types from './actionTypes';
import UserApi from '../api/userApi';

export function loginUserSuccess(data) {
  return {type: types.LOGIN_USER_SUCCESS, data};
}

export function loginUserFailure(err) {
  return {type: types.LOGIN_USER_FAILURE, err};
}

export function loginUser(credentials, cb) {
  return function(dispatch) {
    UserApi.loginUser(credentials)
        .then(response => {
            dispatch(loginUserSuccess(response.data));
            cb();
        })
        .catch(err => {
            dispatch(loginUserFailure(err));
        });
     };
 }

My reducer.

import * as types from '../actions/actionTypes';
import initialState from './initialState';

export default function userReducer(state = initialState.User, action) 
{
 switch (action.type) {
    case types.LOGIN_USER_SUCCESS: 
        {
            return Object.assign({},state,{isAuthenticated: true});
        }

    default: 
        return state;
 }
}

Store configuration.

import {
 createStore,
 applyMiddleware,
 compose
} from 'redux';
import rootReducer from '../reducers';
import reduxtImmutableStateInvariant from 'redux-immutable-state-invariant';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
                    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({latency: 0 }) : compose;
export default function configureStore(initialState) {
  return createStore(
   rootReducer,
   initialState,
   composeEnhancers(
    applyMiddleware(thunk, reduxtImmutableStateInvariant())
   )
  );
}

This is where the action is initially dispatched.

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {
  Redirect
} from 'react-router-dom';
import * as userActions from '../../actions/userActions';
import PropTypes from 'prop-types';

class Login extends React.Component {
 constructor(props, context) {
  super(props, context);
  this.state = {
   redirectToReferrer: this.props.user.isAuthenticated
  };
  this.login = this.login.bind(this);
 }

 login() {
  this.props.actions.loginUser({username: "[email protected]",password: "dhanushu"}, () =>{this.setState({redirectToReferrer : true});});}

 render() {
   const { from } = this.props.location.state || { from: { pathname: '/' } };
 const {redirectToReferrer} = this.state;
 let isAuth = this.props.user.isAuthenticated;

   if (redirectToReferrer) {
    return (
     <Redirect to={from}/>  
    );
  }

 return (
    <div>
      <p>You must log in to view the page at {from.pathname} and you are {isAuth ? "authenticated" : "not authenticated"}</p>
      <button onClick={this.login}>Log in</button>
    </div>
  );
 }
}

Login.propTypes = {
  actions: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
 return {
 user: state.user
 };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(userActions, dispatch)
  };
 }

 export default connect(mapStateToProps, mapDispatchToProps)(Login);