Failed to setup loader in react-component - reactjs

Question

I am trying to setup a loader. But the code is never going through the if blocks.
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import LoadingPage from './LoadingPage';
import { usersFetchData, addFollower, addFollowing, removeFollower,
removeFollowing, resetUser} from '../actions/users';
class UserProfile extends React.Component{
constructor(props){
super(props);
this.state = {
isFollowed: false,
content: undefined
}
}
componentDidMount(){
this.props.fetchData(`http://localhost:5000/api/user/
${this.props.match.params.uid}`);
(Object.keys(this.props.user).length !== 0) &&
(this.props.user.followers.includes(this.props.currentUser.uid)) &&
this.setState({isFollowed: true});
}
openContentModal = (post) => {
this.setState({content:post});
console.log(this.state);
}
closeContentModal = () =>{
this.setState(() => ({ content: undefined }));
console.log(this.state);
}
render(){
if (this.props.hasErrored) {
return <p>Sorry! There was an error loading the items</p>;
}
if (this.props.isLoading) {
console.log('loading...');
return <LoadingPage />;
}
console.log(this.props.isLoading);
return(
<div className="userProfile">
<div>
{console.log(this.props.user)}
{ Object.keys(this.props.user).length !== 0 &&
<div className="user__details">
<div className="user__dp">
<div className="dp__container">
<img src={this.props.user.avatar} alt=
{this.props.user.name}/>
</div>
</div>
<div className="user__description">
<p className="user__name">
{this.props.user.name}</p>
<div className="user__button">
{(this.props.currentUser.uid ===
this.props.user.uid) ?
</div>
</div>
</div>
}
</div>
<div className="user__bio">
<p>{this.props.user.bio}</p>
</div>
<div>
{/* <h3>Posts</h3> */}
<div className="userContent">
{this.props.user.posts &&
this.props.user.posts.map((post) =>{
return(
<div className="userPost">
<Link to=
{`/p/${this.props.user.name}/${post._id}`}>
<img src={post.content}/></Link>
</div>
);
})
}
</div>
</div>
</div>
)
}
}
const mapStateToProps = (state) =>{
console.log(state.usersIsLoading); //getting undefined
return{
currentUser: state.auth,
user: state.users,
hasErrored: state.usersHasErrored,
isLoading: state.usersIsLoading
}
};
const mapDispatchToProps = (dispatch) => {
return {
fetchData: (url) => dispatch(usersFetchData(url))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(UserProfile);
Action
export const userIsLoading = (bool) => ({
type: 'USER_IS_LOADING',
isLoading: bool
});
export const usersFetchDataSuccess = (users) => ({
type: 'USERS_FETCH_DATA_SUCCESS',
users
});
export const usersFetchData = (url) => {
return (dispatch) => {
dispatch(userIsLoading(true));
console.log('hi');
axios
.get(url)
.then(res => {
if(!res){
throw Error(res.statusText)
}
dispatch(userIsLoading(false));
console.log(res.data);
return res.data;
})
.then(users => {
console.log('users',users);
dispatch(usersFetchDataSuccess(users))
})
.catch(() => dispatch(userHasErrored(true)));
}
}
reducer
export const userIsLoading = (state = false, action) => {
switch (action.type) {
case 'USER_IS_LOADING':{
return action.isLoading;
}
default:
return state;
}
}
export const users = (state = {}, action) => {
switch (action.type) {
case 'USERS_FETCH_DATA_SUCCESS':{
return action.users;
}
i have consoled the state. then i am getting a valid boolean value from userIsLoading. But when i am consoling the state.userIsLoading, I am getting undefined. This is very peculiar.can anyone tell me where am i getting it wrong?