Created
November 4, 2017 12:45
-
-
Save muneneevans/cbb742eca77aedf3814ee306dcfc531c to your computer and use it in GitHub Desktop.
container
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment