From 5ecf405fde9cbfb0f7b37fac767de2d9d872b059 Mon Sep 17 00:00:00 2001
From: Rodrigo Pedroso <>
Date: Wed, 19 Jun 2019 17:08:53 -0400
Subject: [PATCH] Redux thunk and asynchronous API calls

---
 package-lock.json           |  6 ++++++
 package.json                |  1 +
 src/js/actions/index.js     | 10 ++++++++++
 src/js/components/App.jsx   |  5 +++++
 src/js/components/Posts.jsx | 32 ++++++++++++++++++++++++++++++++
 src/js/reducers/index.js    |  9 ++++++++-
 src/js/store/index.js       |  3 ++-
 7 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 src/js/components/Posts.jsx

diff --git a/package-lock.json b/package-lock.json
index e894f5a..dc5f611 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9570,6 +9570,12 @@
         "@redux-saga/core": "^1.0.3"
       }
     },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==",
+      "dev": true
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
diff --git a/package.json b/package.json
index 21b274d..aa70de8 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "react-redux": "^7.1.0",
     "redux": "^4.0.1",
     "redux-saga": "^1.0.3",
+    "redux-thunk": "^2.3.0",
     "uuid": "^3.3.2"
   }
 }
diff --git a/src/js/actions/index.js b/src/js/actions/index.js
index 11999a9..ac839ba 100644
--- a/src/js/actions/index.js
+++ b/src/js/actions/index.js
@@ -3,3 +3,13 @@ import { ADD_ARTICLE } from "../constants/action-types"
 export function addArticle(payload) {
   return { type: ADD_ARTICLE, payload }
 }
+
+export function getData() {
+  return function(dispatch) {
+    return fetch("https://jsonplaceholder.typicode.com/posts")
+      .then(response => response.json())
+      .then(json => {
+        dispatch({ type: "DATA_LOADED", payload: json });
+      })
+  }
+}
diff --git a/src/js/components/App.jsx b/src/js/components/App.jsx
index a154a6f..ffd1aaf 100644
--- a/src/js/components/App.jsx
+++ b/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>
 )
diff --git a/src/js/components/Posts.jsx b/src/js/components/Posts.jsx
new file mode 100644
index 0000000..805fe49
--- /dev/null
+++ b/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)
diff --git a/src/js/reducers/index.js b/src/js/reducers/index.js
index 9d023de..1c427f7 100644
--- a/src/js/reducers/index.js
+++ b/src/js/reducers/index.js
@@ -1,7 +1,8 @@
 import { ADD_ARTICLE } from '../constants/action-types'
 
 const initialState = {
-  articles: []
+	articles: [],
+	remoteArticles: []
 }
 
 function rootReducer(state = initialState, action) {
@@ -11,6 +12,12 @@ function rootReducer(state = initialState, action) {
     })
 	}
 
+	else if (action.type === "DATA_LOADED") {
+    return Object.assign({}, state, {
+      remoteArticles: state.remoteArticles.concat(action.payload)
+    })
+  }
+
   return state
 }
 
diff --git a/src/js/store/index.js b/src/js/store/index.js
index e38ab9d..f8cc7ce 100644
--- a/src/js/store/index.js
+++ b/src/js/store/index.js
@@ -1,12 +1,13 @@
 import { createStore, applyMiddleware, compose } from 'redux'
 import rootReducer from '../reducers/index'
 import { forbiddenWordsMiddleware } from '../middleware'
+import thunk from 'redux-thunk'
 
 const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 
 const store = createStore(
   rootReducer,
-  storeEnhancers(applyMiddleware(forbiddenWordsMiddleware))
+  storeEnhancers(applyMiddleware(forbiddenWordsMiddleware, thunk))
 )
 
 export default store