update Posts Component to render newly added post

Author: vishalnagda1

src/components/Posts.js

@@ -8,6 +8,12 @@ class Posts extends Component {
     this.props.fetchPosts();
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.newPost) {
+      this.props.posts.unshift(nextProps.newPost);
+    }
+  }
+
   render() {
     const postItems = this.props.posts.map((post) => (
       <div key={post.id}>
@@ -27,10 +33,12 @@ class Posts extends Component {
 Posts.protoType = {
   fetchPosts: PropTypes.func.isRequired,
   posts: PropTypes.array.isRequired,
+  newPost: PropTypes.object,
 };
 
 const mapStateToProps = (state) => ({
-  posts: state.posts.items, // here we used key posts because we used the same key in rootReducer
+  posts: state.posts.items,
+  newPost: state.posts.item,
 });
 
 export default connect(mapStateToProps, { fetchPosts })(Posts);