无法在react-component中设置加载程序

Question

我正在尝试设置装载程序。但是代码永远不会经过if块。

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

动作

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

减速器

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

我已经控制了状态。然后我从userIsLoading获取有效的布尔值。但是当我安慰state.userIsLoading时，我变得不确定。这很奇怪。谁能告诉我我在哪里弄错了？