import React from 'react'; import { render } from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import { Provider, connect } from 'react-redux'; import Hello from './Hello'; const styles = { fontFamily: 'sans-serif', textAlign: 'center', }; const fetchData = (dispatch) => { dispatch({ type: 'start' }); return fetch('https://api.fixer.io/latest') .then((resp) => resp.json()) .then((data) => { dispatch({ type: 'end', error: false, data}); }); }; class App extends React.Component{ constructor(props){ super(props); //Bind action this.executeAction = this.executeAction.bind(this); this.canceAction = this.canceAction.bind(this); } executeAction(){ this.props.dispatch((dispatch) => { return fetchData(dispatch) }) } canceAction(){ this.props.dispatch({ type: 'end' }); } getParsedData(info){ let result = []; const keys = Object.keys(info); keys.forEach(key => { result.push({value: info[key], key: key}); }); return result; } render(){ return (

Current state: {this.props.state}

{ this.props.info &&

Info fetched { this.getParsedData(this.props.info.rates).map((item) => { return

{item.key}

})}

}

); } } const stateToProps = (state) => ({state: state.state, info: state.info}); const mapDispatchToProps = (dispatch) => { return { action1: () => { dispatch((innerDispatch) => { return fetchData(innerDispatch) }) }, dispatch: dispatch, } } const ConenctedApp = connect(stateToProps, mapDispatchToProps)(App); const reducer = (state={state:'init'}, action) => { switch(action.type){ case "start": return {state: 'running'}; case "end": return {state: 'done', info: action.data}; } return state; } const store = createStore(reducer, applyMiddleware(thunk)); store.subscribe(() => { console.log('State', store.getState()); }); const app = render(app, document.getElementById('root'));

Redux-Thunk Example