Cacher is the code snippet organizer for pro developers

import { connect } from 'react-redux'
import React, { Component } from "react"
import { bindActionCreators } from "redux"

//import actions and selectors from the Store folder
import * as postActions from "../Store/Posts/actions"
import * as postSelectors from "../Store/Posts/selectors"

//import your component
import PostItem from "../Components/PostItem"

class PostsPage extends Component {

    //when the component is mount, call the fetch post action
    componentDidMount(){
        this.props.postActions.fetchPosts()
    }

    //get alert from the  
    showPost(post){
        alert(post.body)
    }

    render(){
        return(
            <div>
                {
                    this.props.postsIsFetched ?(
                        <div>
                            {this.props.posts.map((post, i) => (
                                <PostItem key={i} 
                                    post={post}
                                    clickAction={this.showPost}/>
                            ))}
                        </div>
                    ):(
                        <h3>loading</h3>
                    )
                }
            </div>
        )
    }
}

//get the posts and the fetch status from the post selector
const mapStateToProps = (state, ownProps) => {
    return {
        postsIsFetched: postSelectors.getPostStatus(state),
        posts: postSelectors.getPosts(state)
    }
}

//mapp all actions in the post store to prop: postActions
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        postActions: bindActionCreators(postActions, dispatch)
    }
}



export default connect(mapStateToProps, mapDispatchToProps)(PostsPage)