Component not rerendering on a redux store change - reactjs

Question

Have a component to display user information. However, when the user logouts out, and shouldn't be in the store anymore ( I have set a dispatch up for this as well). Also, I am able to reload the entire page and then the user information displays. I have been having a go with componentDidUpdate and componentDidMount but I can't seem to figure it out.
Here is the view component:
// import React from "react";
// import { connect } from "react-redux";
// import { getUser } from "../store/actions/userActions";
// import { withRouter } from 'react-router-dom';
import React from 'react';
import { connect } from 'react-redux';
import * as actions from '../store/actions/auth';
class UserDetailView extends React.Component {
componentDidMount() {}
shouldComponentUpdate(nextProps, props) {
console.log(nextProps);
const username = this.props.user.username;
console.log(username);
if (username !== nextProps.username) {
console.log(username);
return true;
} else {
return false;
}
}
render() {
const user = this.props.user;
return (
<div>
{this.props.user ? (
<div>
<h3>{user.username}</h3>
{this.props.user.email}
</div>
) : (
<h3>Not Logged In</h3>
)}
</div>
);
}
}
const mapStateToProps = state => ({
username: state.username,
user: state.user
});
const mapStateToDispatch = dispatch => ({
onTryAutoSignup: () => dispatch(actions.authCheckState()),
getfetchUser: id => dispatch(actions.fetchUser(id))
});
export default connect(
mapStateToProps,
mapStateToDispatch
)(UserDetailView);
// class UserDetailView extends React.Component {
// componentDidMount() {
// const { getUser, userID } = this.props
// getUser(userID) //fixed
// }
// render() {
// console.log(this.props.userID)
// console.log(this.props.user)
// return (
// <ul>
// {this.props.user.map(user =>
// <li key={user.id}>{user.username}</li>
// )}
// </ul>
// );
// }
// }
// const mapStateToProps = (state, ownProps) => ({
// user: state.user,
// userID: ownProps.match.params.userID,
// });
// const mapDispatchToProps = dispatch => ({ //added
// getUser: (userID) => dispatch(getUser(userID))
// })
// export default withRouter(connect(mapStateToProps, {getUser})(UserDetailView)); //fixed
Reducer:
const getUserInformation = (state, action) => {
return Object.assign({}, state, {
user: action.payload.user
});
};
Action Generator and Action
export const authSuccess = (token, username) => {
return {
type: actionTypes.AUTH_SUCCESS,
token: token,
username: username
};
};
export const fetchUser = username => {
return dispatch => {
return axios
.get(`http://127.0.0.1:8000/api/user/${username}/`)
.then(res => {
const user = res.data;
dispatch(getUserInformation(user));
});
};
};

Answer 1

I see no reason to override shouldComponentUpdate, just inherit from React.PureComponent.
You have some mix-ups in action creators and reducers. It should be something like this:
dispatch(setUserInformation(user)); // dispatch action
const setUserInformation = ({ type: 'SET_USER_INFORMATION', user }); // this is the action creator, returns an object with the type and the payload
const reducer = (state, action) { // this is the reducer
switch (action.type) {
case 'SET_USER_INFORMATION':
return {
...state,
user: action.user
}
}
}