javascript - Axios を使用した Redux での API 呼び出しの処理

Question

みなさんこんばんは！

私は React と Redux の初心者なので、これがまったくばかげているように聞こえる場合はご容赦ください。Redux でいくつかの API 呼び出しを実行する方法を学習しようとしていますが、うまくいきません。アクションクリエーターからのリクエストをコンソールログに記録すると、プロミス値は常に「未定義」であるため、これを正しく行っているかどうかわかりません。

私の目標は、ペイロード オブジェクト内のデータから情報を取得し、コンポーネント内に表示することです。私はこれを過去数日間機能させようとしてきましたが、完全に迷っています。

Axios for と redux-promise を使用して呼び出しを処理しています。

どんな助けでも大歓迎です。

コンソールからの出力は次のとおりです。

アクションクリエーター

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
    };
}

レデューサー

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;
  }

成分

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 (
    <div>
    </div>
    );
 }

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

function mapDispatchToProps(dispatch) {
 return bindActionCreators({ selectFlight: getAllFlights }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);