Skip to content

Instantly share code, notes, and snippets.

@iamsoorena
Created December 14, 2018 12:25
Show Gist options
  • Save iamsoorena/26427f1d766e507d02063da0e8322724 to your computer and use it in GitHub Desktop.
Save iamsoorena/26427f1d766e507d02063da0e8322724 to your computer and use it in GitHub Desktop.
import React from 'react'
import ReactDOM from 'react-dom'
import agent from './agent'
import {createStore} from 'redux'
import {connect, Provider} from 'react-redux'
const ACTION_NAMES = {
ARTICLES_LOADED: 'ARTICLES_LOADED'
}
const Reducer = (state = {}, action) => {
if(action.type === ACTION_NAMES.ARTICLES_LOADED ){
return {
...state,
articles: action.data
}
} else {
return {
...state
}
}
}
const Store = createStore(Reducer);
// http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
const mapStateToProps = state => ({
posts: state.articles
})
const mapDispatchToProps = (dispatch) => ({
onArticlesLoaded: data => dispatch({ type: ACTION_NAMES.ARTICLES_LOADED, data: data })
})
class App extends React.Component {
componentDidMount () {
console.log(this.props)
agent.Articles.all().then(data => {
console.log(data)
this.props.onArticlesLoaded(data.articles)
})
}
render() {
const articles = this.props.posts;
// return (
// <div>salam</div>
// )
return (
<div>
{articles &&
<ul>
{
articles.map(article => {
return (
<li>
<h1>{article.title}</h1>
<p>{article.body}</p>
</li>
)
})
}
</ul>
}
{
!articles &&
<h1>Loading</h1>
}
</div>
)
}
}
const AppWrapper = connect(mapStateToProps, mapDispatchToProps)(App);
const AppWrapper = <App onArticlesLoaded={
data => TellRedux({ type: ACTION_NAMES.ARTICLES_LOADED, data: data })
}
posts={Redux.articles} />
ReactDOM.render(
<Provider store={Store}>
<AppWrapper/>
</Provider>,
document.getElementById('app')
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment