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 = () => (
@@ -11,6 +12,10 @@ const App = () => (
Add a new article
+
+
)
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 (
+
+ {this.props.articles.map(el => (
+ -
+ {el.title}
+
+ ))}
+
+ )
+ }
+}
+
+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