Base /blog

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

src/apis/sudoscientist.js

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export default axios.create({
+    baseURL: 'http://localhost:8080/v1/api/'
+});

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 (
+                <div className="item" key={post.id}>
+                    <i className="large middle aligned icon user" />
+                    <div className="content">
+                        <div className="description">
+                            <h2>{post.title}</h2>
+                            <p>{post.content}</p>
+                        </div>
+                    </div>
+                </div>
+            );
+        });
+    }
+
+
     render () {
-        return <div>Post List</div>
+        console.log(this.props.posts)
+        return (
+            <div className="ui relaxed divided list">
+                {this.renderList()}
+            </div>
+        );
     }
 }
 
-export default PostList;
+const mapStateToProps = (state) => {
+    return { posts: state.posts };
+}
+
+export default connect(
+    mapStateToProps,
+    { fetchPosts }
+)(PostList);

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(
-    <Provider store={createStore(reducers)}>
+    <Provider store={store}>
       <App />
     </Provider>,
     document.querySelector('#root')

src/reducers/index.js

@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
+import postsReducer from './postsReducer';
 
 export default combineReducers({
-    replaceMe: () => 'test'
+    posts: postsReducer
 });

src/reducers/postsReducer.js

@@ -0,0 +1,8 @@
+export default (state = [], action) => {
+    switch (action.type) {
+        case 'FETCH_POSTS':
+            return action.payload;
+        default:
+            return state;
+    }
+};