<div id="root"></div>
body {
  padding: 1rem;
}
// console.log(axios)
const { createStore, applyMiddleware } = Redux;
const { Provider, connect } = ReactRedux
const thunk = ReduxThunk.default

const loadLorem = () => {
  return (dispatch) => {
    // console.log("****")
    axios.get("https://baconipsum.com/api/?type=all-meat&sentences=1&start-with-lorem=0")
      .then(response => {
        // console.log(response.data)
        dispatch({type: 'CHANGE_SENTENCE', sentence: response.data[0]})
      }
    )
  }
}

const defaultState = {
  sentence: "Waiting for load"
}

const mainReducer = (prevState = defaultState, action) => {
  if (action.type === "CHANGE_SENTENCE") {
    return {...prevState, sentence: action.sentence}
  }
  else if (action.type === "TEST") {
    return {...prevState, sentence: action.value}
  }
  else {
    return prevState
  }
}

const MessageBox = (props) => {
  return <div>{ props.message }</div>
}



const mapStateToProps = state => state
const actionsCreators = {
  loadLorem: loadLorem,
  testAction: () => ({type: 'TEST', value: 'VALUE'})
}

const store = createStore(mainReducer, applyMiddleware(thunk))
// const store = createStore(mainReducer)


const App = (props) => {
  return <div>
    <button onClick={props.loadLorem}>LOAD_LOREM</button>
    <button onClick={props.testAction}>TEST</button>
    <MessageBox message={props.sentence}/>
  </div>
}

const AppConnected = connect(mapStateToProps, actionsCreators)(App)
// const AppConnected = connect(mapStateToProps, mapDispatchToProps)(App)



ReactDOM.render(<Provider store={store}><AppConnected sentence="Lorem" /></Provider>, document.getElementById('root'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //unpkg.com/react/umd/react.development.js
  2. //unpkg.com/react-dom/umd/react-dom.development.js
  3. https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0-rc.1/redux.js
  4. https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.js
  5. https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.js
  6. https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js