React-Redux - Action return undefined - reactjs

Question

I'm trying to do an API call through an action. I am using an onchange event to do a call with also adding an ID.
I made the MapDispatchToProps where I bind my action through bindActionCreators. When I call the action, I see that he is doing the API call and gets the correct value. Only when it returns to the onchange event it is undefined.
I tried following several examples and pluralsights tutorials, but none of these work.
ACTION:
export function loadStanding(id) {
var url = "http://api.football-data.org/v2/competitions/" + id + "/standings";
return function (dispatch) {
return fetch(url,
{
mode: "cors"
})
.then(
response => response.json(),
error => console.log('An error occurred.', error)
)
.then((json) => {
console.log("=== LOADSTANDING ACTION ===");
console.log(json);
dispatch(loadStandingsSucces(json));
});
};
}
PAGE:
class HomePage extends React.Component {
constructor(props, context) {
super(props, context);
this.state = { standings: [], selectedId: 0 };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
event.preventDefault();
this.props.actions.loadStanding(event.target.value).then(function(output) {
console.log("=== HANDLECHANGE ===");
console.log(output);
});
}
render() {
const { competitions = [] } = this.props.competitions;
const compIds = [2000,2001,2002,2003,2013,2014,2015,2016,2017,2018,2019,2021];
return (
<div className="flex-container">
<div className="row">
<div className="flex-item">
<h2>Kies een competitie:</h2>
</div>
<div className="flex-item">
<DropdownComponent onChange={this.handleChange} value="id" itemKey="id" text="name" competitions={competitions.filter(function(comp) { return compIds.includes(comp.id); })} />
</div>
<div className="flex-item">
{/* <TableComponent /> */}
</div>
</div>
</div>
);
}
}
HomePage.propTypes = {
competitions: PropTypes.any.isRequired,
actions: PropTypes.object.isRequired
};
function mapStateToProps(state) {
return {
competitions: state.competitions,
standings: state.standings
};
}
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(standingActions, dispatch)
};
};
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

Answer 1

First, I sugest you to check that call is working properly with Postman or similar tool.
In second place, I think that you have a little misconception about how to manage data with React and Redux.
The data you are fetching must be stored inside the redux store, when you call that action creator, the data received in the response should be dispatched to a reducer.
That reducer will store that information and then will cause your component will render again, and the fetched data will be available on the component props.
More information here: Redux data flow