1
0
Fork 0

Base /blog

This commit is contained in:
Amarpreet Minhas 2019-05-27 21:30:52 -04:00
parent 7dd19ef311
commit a53fb5fb50
6 changed files with 64 additions and 5 deletions

6
src/actions/index.js Normal file
View file

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

View file

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

View file

@ -1,9 +1,45 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions';
class PostList extends React.Component { 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 () { 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);

View file

@ -1,13 +1,16 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; 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 App from './components/App';
import reducers from './reducers'; import reducers from './reducers';
const store = createStore(reducers, applyMiddleware(thunk));
ReactDOM.render( ReactDOM.render(
<Provider store={createStore(reducers)}> <Provider store={store}>
<App /> <App />
</Provider>, </Provider>,
document.querySelector('#root') document.querySelector('#root')

View file

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

View file

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