<!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"
}]