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

+
+
+

API posts

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