使用 Axios 处理 Redux 中的 api 调用 [英] Handling api calls in Redux with Axios

问题描述

大家晚上好！

我是 React 和 Redux 的完全初学者，所以如果这听起来很愚蠢，请耐心等待.我正在尝试学习如何在 Redux 中执行一些 API 调用，但进展并不顺利.当我控制台记录来自动作创建者的请求时，承诺值始终为未定义"，因此我不确定我是否正确执行此操作.

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

我使用 Axios 和 redux-promise 来处理调用.

任何帮助将不胜感激.

这是控制台的输出.

动作创建者

从'axios'导入axios；导出 const FETCH_FLIGHT = 'FETCH_FLIGHT';导出函数 getAllFlights() {const request = axios.get('http://localhost:3000/flug');控制台日志(请求)；返回 {类型:FETCH_FLIGHT，有效载荷:请求};}

减速器

import { FETCH_FLIGHT } from '../actions/index';导出默认函数(状态 = []，动作){开关(动作.类型){案例 FETCH_FLIGHT:控制台日志(操作)返回 [ action.payload.data, ...state ]}返回状态；}

组件

从'react'导入React；从反应"导入{组件}；从'react-redux'导入{连接}；从redux"导入 { bindActionCreators };从'../actions/index'导入{getAllFlights}；从./目的地"导入目的地；类 App 扩展组件 {componentWillMount(){this.props.selectFlight();}构造函数(道具){超级(道具)；this.state = {};}使成为() {返回 (<div>

);}函数 mapStateToProps(state) {返回 {目的地:state.icelandair};}函数 mapDispatchToProps(dispatch) {return bindActionCreators({ selectFlight: getAllFlights }, dispatch);}导出默认连接(mapStateToProps, mapDispatchToProps)(App);

解决方案

axios 是承诺，因此您需要使用 then 来获得结果.您应该在单独的文件中请求您的 api，并在结果返回时调用您的操作.

//WebAPIUtil.jsaxios.get('http://localhost:3000/flug').then(函数(结果){YourAction.getAllFlights(结果)});

在您的操作文件中将是这样的:

导出函数 getAllFlights(request) {控制台日志(请求)；返回 {类型:FETCH_FLIGHT，有效载荷:请求};}

Good evening everybody!

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.

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.

I'm using Axios for and redux-promise to handle the call.

Any help will be greatly appreciated.

Here's the output from the console.

Action Creator

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

Reducer

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

Component

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

解决方案

axios is the promise so you need to use then to get your result. You should request your api in a separate file and call your action when the result comes back.

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

In your action file will be like this :

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

这篇关于使用 Axios 处理 Redux 中的 api 调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！