const {createStore } = Redux;
const { Provider, connect } = ReactRedux;

const store = createStore((state={name: 'ron'}, action) => {
  switch(action.type) {
    case 'changeName': return {name: action.name};
    default: return state
  }
})

const Person = props => {
  const {name, dispatch} = props
  console.log(`rendering Person due to name changed to ${name}`)
  return (
    <div>
      <p> My name is {name} </p>
      <button onClick={ () => dispatch({type: 'changeName', name: 'ron'}) } > Change to Ron </button>
      <button onClick={ () => dispatch({type: 'changeName', name: 'john'}) } > Change to John</button>
    </div>
  )
}

const App = connect(state=>state)(Person)

ReactDOM.render(
  <Provider store={store}><App/></Provider>,
  document.getElementById('root')
);