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