Warning: Failed Prop Type: The prop 'hasError' is marked as required in 'PostList', but it's value is 'undefined '

Question

I'm fairly new to React Native and Redux and was following along with this tutorial to implement Redux with my app. When I load my PostList component, I get the following warnings for my hasError and isLoading catches as shown in the following screenshots.

I apologize for the massive amounts of source code about to be embedded in the question, I tried to cut out unnecessary code.

PostList.js (Component)

[unnecessary import statements]

import { fetchPosts, postsFetchError, postsFetchLoading } from '../actions/PostsActions';

class PostList extends Component {

    static navigationOptions = ({navigation}) => {
        [redacted]
    }

    renderPosts = ({ _id, upvotes, downvotes, message, datetime }, i) => {
        [redacted]
    }

    componentDidMount() {
        this.props.fetchData('[redacted]');
    }

    render() {
        if (this.props.hasError) {
            return (
                <View style={styles.center}>
                    <Text>
                        Failed to load posts!
                    </Text>
                </View>
            )
        }

        if (this.props.isLoading) {
            return (
                <View style={styles.center}>
                    <ActivityIndicator animating={true} />
                </View>
            )
        }

        this.props.posts.sort(function(a,b) {
            return Date.parse(b.datetime) - Date.parse(a.datetime);
        })

        return (
            <ScrollView style={styles.container}>
                {this.props.posts.map(this.renderPosts)}   
            </ScrollView>                        
        )
    }
}

PostList.propTypes = {
    fetchData: PropTypes.func.isRequired,
    posts: PropTypes.array.isRequired,
    hasError: PropTypes.bool.isRequired,
    isLoading: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => {
    return {
        posts: state.posts,
        hasError: state.postsFetchError,
        isLoading: state.postsFetchLoading
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (url) => dispatch(fetchPosts(url)),
    };
};

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

PostsActions.js

import axios from 'axios';

export function postsFetchError(bool) {
    return {
        type: 'POSTS_FETCH_ERROR',
        hasError: bool
    };
}

export function postsFetchLoading(bool) {
    return {
        type: 'POSTS_FETCH_LOADING',
        isLoading: bool
    };
}

export function postsFetchSuccess(posts) {
    return {
        type: 'POSTS_FETCH_SUCCESS',
        posts
    };
}

export function fetchPosts(url) {
    return (dispatch) => {
        dispatch(postsFetchLoading(true));

        axios.get(url)
            .then((response) => {
                if (response.status !== 200) {
                    throw Error(response.statusText);
                }

                dispatch(postsFetchLoading(false));

                return response;
            })
            .then((response) => dispatch(postsFetchSuccess(response.data)))
            .catch(() => dispatch(postsFetchError(true)));
    };
}

PostsReducers.js

export function postsError(state = false, action) {
    switch (action.type) {
        case 'POSTS_FETCH_ERROR':
            return action.hasError;
        default:
            return state;
    }
}

export function postsLoading(state = false, action) {
    switch (action.type) {
        case 'POSTS_FETCH_LOADING':
            return action.isLoading;
        default:
            return state;
    }
}

export function posts(state = [], action) {
    switch (action.type) {
        case 'POSTS_FETCH_SUCCESS':
            return action.posts;
        default:
            return state;
    }
}

Combining the reducers in an index and configuring the store all work fine, and I don't get warnings for actions and reducers that actually get the posts. My code matches the tutorial's examples, but I'd be shocked if someone published a tutorial that had unresolved warnings (then again this IS Javascript development so I guess anything goes). I can add further information for anyone that's curious. Thanks to anyone that helps.

Answer 1

Is it because:

const mapStateToProps = (state) => {
    return {
        posts: state.posts,
        hasError: state.**postsFetchError**,
        isLoading: state.**postsFetchLoading**
    };
};

Does not match:

export function **postsError**(state = false, action) {
export function **postsLoading**(state = false, action)