Redux thunk and asynchronous API calls

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",

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"
   }
 }

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 });
+      })
+  }
+}

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)

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
 }
 

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