redux.js

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')
)