<!DOCTYPE html>
<html>

  <head>
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
        <script  src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
        <script  src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.1/react-redux.js"></script>
        <script  src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.1.0/redux-thunk.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.js'></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="root"></div>
    <script src="script.js"></script>
  </body>

</html>
const { createStore, bindActionCreators, applyMiddleware } = Redux;
const { Provider, connect } = ReactRedux;
const thunk = window.ReduxThunk.default;

const abc = (state={}, action) => {
  switch (action.type) {
    case 'SET_DATA':
      return action.payload;
    default:
      return state;
  };
};

const store = createStore(abc, applyMiddleware(thunk));

class First extends React.Component {
  constructor (props){
    super(props);
    this.getData = this.getData.bind(this);
  }

  getData(){
    this.props.load();
  }
  
  render() {
    return (
      <div>
        <button onClick={this.getData}>GET DATA</button>
        <pre>{JSON.stringify(this.props.data)}</pre>
      </div>
    );
  }
} 

const actions = {
  load: () => {
    return (dispatch) => {
      return axios.get('data.json').then((response) => {
        dispatch({  
          type: 'SET_DATA',
          payload: response.data,
        });
      });
    };
  }
};

const mapStateToProps = (state) => ({
	data: state
});

const mapDispatchToProps = (dispatch) => ({
  load: bindActionCreators(actions.load, dispatch),
});

const AppContainer = connect(mapStateToProps,	mapDispatchToProps)(First);

ReactDOM.render(
  <Provider store={store}>
    <AppContainer/>
  </Provider>
  ,document.getElementById('root'));
/* Styles go here */

[{
  "name":"test1"
},
{
  "name":"test2"
}]