diff --git a/src/actions/index.js b/src/actions/index.js
new file mode 100644
index 0000000..e7ddd69
--- /dev/null
+++ b/src/actions/index.js
@@ -0,0 +1,6 @@
+import sudoscientist from '../apis/sudoscientist';
+
+export const fetchPosts = () => async (dispatch) => {
+ const response = await sudoscientist.get('/blog');
+ dispatch({ type: 'FETCH_POSTS', payload: response.data })
+};
diff --git a/src/apis/sudoscientist.js b/src/apis/sudoscientist.js
new file mode 100644
index 0000000..2fc7103
--- /dev/null
+++ b/src/apis/sudoscientist.js
@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export default axios.create({
+ baseURL: 'http://localhost:8080/v1/api/'
+});
diff --git a/src/components/PostList.js b/src/components/PostList.js
index a13a8d3..f380a63 100644
--- a/src/components/PostList.js
+++ b/src/components/PostList.js
@@ -1,9 +1,45 @@
import React from 'react';
+import { connect } from 'react-redux';
+import { fetchPosts } from '../actions';
class PostList extends React.Component {
+ componentDidMount() {
+ this.props.fetchPosts();
+ }
+
+
+ renderList() {
+ return this.props.posts.map(post => {
+ return (
+
+
+
+
+
{post.title}
+
{post.content}
+
+
+
+ );
+ });
+ }
+
+
render () {
- return Post List
+ console.log(this.props.posts)
+ return (
+
+ {this.renderList()}
+
+ );
}
}
-export default PostList;
+const mapStateToProps = (state) => {
+ return { posts: state.posts };
+}
+
+export default connect(
+ mapStateToProps,
+ { fetchPosts }
+)(PostList);
diff --git a/src/index.js b/src/index.js
index cd34234..2f8c633 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk'
import App from './components/App';
import reducers from './reducers';
+const store = createStore(reducers, applyMiddleware(thunk));
+
ReactDOM.render(
-
+
,
document.querySelector('#root')
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 847820c..dad0a1a 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,5 +1,6 @@
import { combineReducers } from 'redux';
+import postsReducer from './postsReducer';
export default combineReducers({
- replaceMe: () => 'test'
+ posts: postsReducer
});
diff --git a/src/reducers/postsReducer.js b/src/reducers/postsReducer.js
new file mode 100644
index 0000000..32daf04
--- /dev/null
+++ b/src/reducers/postsReducer.js
@@ -0,0 +1,8 @@
+export default (state = [], action) => {
+ switch (action.type) {
+ case 'FETCH_POSTS':
+ return action.payload;
+ default:
+ return state;
+ }
+};