Handling api calls in Redux with Axios
<p>Good evening everybody!</p>

<p>I'm a total beginner in React and Redux so please bear with me if this sounds totally stupid. I'm trying to learn how I can perform some API calls in Redux and it's not going all to well. When I console log the request from the action creator the promise value is always "undefined" so I'm not sure if I'm doing this correctly. </p>

<p>My goal is to grab the information from the data inside the payload object and display them inside the component. I've been trying to get this to work for the past days and I'm totally lost.</p>

<p>I'm using Axios for and redux-promise to handle the call.</p>

<p>Any help will be greatly appreciated.</p>

<p>Here's the output from the console.</p>

<p><a href="https://i.stack.imgur.com/5q3Bt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5q3Bt.png" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/VS8Sc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VS8Sc.png" alt="enter image description here"></a></p>

<p><strong>Action Creator</strong></p>

<pre><code>import axios from 'axios';
export const FETCH_FLIGHT = 'FETCH_FLIGHT';

export function getAllFlights() {

const request = axios.get('http://localhost:3000/flug');
console.log(request);
  return {
    type: FETCH_FLIGHT,
    payload: request
    };
}
</code></pre>

<p><strong>Reducer</strong></p>

<pre><code>import { FETCH_FLIGHT } from '../actions/index';

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_FLIGHT:
    console.log(action)
      return [ action.payload.data, ...state ]
    }
   return state;
  }
</code></pre>

<p><strong>Component</strong></p>

<pre><code>import React from 'react';
import { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getAllFlights } from '../actions/index';
import Destinations from './Destinations';

class App extends Component {

componentWillMount(){
  this.props.selectFlight();
}

constructor(props) {
 super(props);
  this.state = {
 };
}

render() {
  return (
    &lt;div&gt;
    &lt;/div&gt;
    );
 }

function mapStateToProps(state) {
 return {
   dest: state.icelandair
  };
}

function mapDispatchToProps(dispatch) {
 return bindActionCreators({ selectFlight: getAllFlights }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
</code></pre>