Javascript 使用Axios在Redux中处理api调用

大家晚上好

我是React和Redux的初学者，所以如果这听起来很愚蠢，请容忍我。我正在尝试学习如何在Redux中执行一些API调用，但并不是一切顺利。当我控制台记录来自动作创建者的请求时，承诺值总是“未定义”，因此我不确定是否正确执行了此操作

我的目标是从payload对象内的数据中获取信息，并在组件内显示它们。在过去的几天里，我一直在努力让它发挥作用，但我完全迷失了方向

我正在使用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 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);

从“React”导入React；
从“react”导入{Component}；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../actions/index”导入{getAllFlights}；
从“./目的地”导入目的地；
类应用程序扩展组件{
组件willmount（）{
this.props.selectFlight（）；
}
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
返回(
);
}
函数MapStateTops（状态）{
返回{
目的地：冰岛航空公司
};
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{selectFlight:getAllFlights}，dispatch）；
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

axios

是一个承诺，因此您需要使用

然后使用
来获得结果。您应该在单独的文件中请求api，并在结果返回时调用您的操作

 //WebAPIUtil.js
axios.get('http://localhost:3000/flug')
  .then(function(result){ 
    YourAction.getAllFlights(result)
  });

在您的操作文件中，将如下所示：

export function getAllFlights(request) {
  console.log(request);
  return {
    type: FETCH_FLIGHT,
    payload: request
  };
}

解决这个问题的最佳方法是添加redux中间件来处理所有api请求

是一种您可以使用的即插即用中间件。
我还认为最好的方法是使用redux axios中间件。设置可能有点棘手，因为您的商店应该以类似的方式配置：

import { createStore, applyMiddleware } from 'redux';
import axiosMiddleware from 'redux-axios-middleware';
import axios from 'axios';
import rootReducer from '../reducers';

const configureStore = () => {   
  return createStore(
    rootReducer,
    applyMiddleware(axiosMiddleware(axios))
  );
}

const store = configureStore();

您的动作创建者现在看起来如下所示：

import './axios' // that's your axios.js file, not the library

export const FETCH_FLIGHT = 'FETCH_FLIGHT';

export const getAllFlights = () => {
  return {
    type: FETCH_FLIGHT,
    payload: {
      request: {
        method: 'post', // or get
        url:'http://localhost:3000/flug'
      }
    }
  }
}

你可以用thunk做这个

您可以在
中调度一个操作，然后
，当它收到来自axios调用的响应时，它将更新状态


导出函数someFunction（）{
返回（发送）=>{
获取（URL）
.then（（响应）=>{dispatch（YourAction（响应））；}）
.catch（（响应）=>{返回承诺.拒绝（响应）；}）；
};
}
我是这样处理这项任务的：

import axios from 'axios';

export const receiveTreeData = data => ({
  type: 'RECEIVE_TREE_DATA', data,
})

export const treeRequestFailed = (err) => ({
  type: 'TREE_DATA_REQUEST_FAILED', err,
})

export const fetchTreeData = () => {
  return dispatch => {
    axios.get(config.endpoint + 'tree')
      .then(res => dispatch(receiveTreeData(res.data)))
      .catch(err => dispatch(treeRequestFailed(err)))
  }
}

感谢您的帮助：）是的，请将此标记为答案。虽然我个人喜欢redux axios中间件，但这确实是最好的答案，应该标记为一个，以备将来使用！我不明白这是如何工作的。您在哪里调用
axios.get
from？@AlanSchapira它是使用
import axios from'axio导入到您的文件的s'
您如何在操作中调用webAPIUtil？什么不适合您？您的代码看起来不错。redux promise希望有效负载是一个承诺，并且看起来这就是您提供的。您可以发布演示，我如何从connect方法触发方法api吗