My Redux state is getting changed, but it doesn't re-render - reactjs

Question

I have a parent component and a child component. I can see that the reducer is getting an update (Please refer to screenshot) but it is not re-rendering the component. I am calling some API, and once the response comes, it will just update some variable and re-render the component.
Parent component
import React, { Component } from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import {connect} from "react-redux";
import { bindActionCreators } from 'redux'
import ProfileInfo from '../components/Profile/ProfileInfo'
import Details from '../components/Profile/Details'
import UnitSpec from '../components/Profile/UnitSpec'
import * as profileActionCreators from "./../actions/profileActions";
import * as StaticData from '../utils/country'
class NewProfilePage extends Component {
constructor(props) {
super(props);
this.state = { tabIndex: 0 ,
countryList: StaticData.Country,
};
let { dispatch } = this.props
this.actions = bindActionCreators({...profileActionCreators} , dispatch);
}
componentWillReceiveProps(nextProps) {
console.log('nextProps', nextProps)
}
render() {
return (
<div className="admin-holder">
<div className="row profile-row">
<div className="small-12 large-4 columns">
<ProfileInfo></ProfileInfo>
</div>
<div className="small-12 large-8 columns">
<Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
<TabList>
<Tab>Details</Tab>
<Tab>Unit Spec</Tab>
<Tab>Imaginery</Tab>
<Tab>Menu</Tab>
</TabList>
<TabPanel>
<Details updateDetails = {(userDetail) => this.actions.updateDetails(userDetail)} countryList={this.state.countryList}/>
</TabPanel>
<TabPanel>
<UnitSpec staticData={StaticData}/>
</TabPanel>
<TabPanel>
</TabPanel>
<TabPanel>
</TabPanel>
</Tabs>
</div>
</div>
</div>
);
}
}
const mapStateToProps= (state) => {
console.log('state', state)
return{
profileReducer: state.profileReducer
};
};
export default connect(mapStateToProps)(NewProfilePage);
Reducer
import * as types from '../constant';
const initialCommonState = {
countryList: [],
loadingCountryList: false,
isProfileUpdated: false
}
const profileReducer = (state=initialCommonState, action) => {
switch(action.type){
case types.UPDATE_DETAILS + "_FULFILLED":
const response = action.payload;
return Object.assign({}, state, {
isProfileUpdated: true
});
case types.UPDATE_DETAILS + "_PENDING":
return Object.assign({}, state, {
isProfileUpdated: false
});
case types.UPDATE_DETAILS + "_REJECTED":
return Object.assign({}, state, {
isProfileUpdated: false
});
default :
return state
}
}
export default profileReducer;
Please look into screenshot as well and you can see "isProfileUpdated" is changed to true
Store
import {createStore,combineReducers,applyMiddleware} from 'redux'
import logger from 'redux-logger';
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import reducers from '../reducers';
const middleware = [];
if (process.env.NODE_ENV === 'development') {
middleware.push(logger);
}
export default createStore(
combineReducers({reducers}),
{},
//applyMiddleware(logger(),thunk , promise())
applyMiddleware(logger, thunk , promise())
)

Answer 1

Your state contains profile
const mapStateToProps= (state) => {
console.log('state', state)
return{
profileReducer: state.profile
};
};