Redux thunk and asynchronous API calls

src/js/components/App.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import List from './List'
 import Form from './Form'
+import Post from './Posts'
 
 const App = () => (
   <div className = 'row mt-5'>
@@ -11,6 +12,10 @@ const App = () => (
 		<div className = 'col-md-4 offset-md-1'>
       <h2>Add a new article</h2>
       <Form />
+    </div>
+		<div className="col-md-4 offset-md-1">
+      <h2>API posts</h2>
+      <Post />
     </div>
   </div>
 )

src/js/components/Posts.jsx

@@ -0,0 +1,32 @@
+import React, { Component } from "react"
+import { connect } from "react-redux"
+import { getData } from "../actions/index"
+
+export class Post extends Component {
+  componentDidMount() {
+    this.props.getData()
+  }
+
+  render() {
+		return (
+			<ul className="list-group list-group-flush">
+        {this.props.articles.map(el => (
+          <li className="list-group-item" key={el.id}>
+            {el.title}
+          </li>
+        ))}
+      </ul>
+		)
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    articles: state.remoteArticles.slice(0, 10)
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  { getData }
+)(Post)